diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e28815508..1f73c0425e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,35 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06) + + +### Bug Fixes + +* **angular,vue:** range form value updates while dragging knob ([#28422](https://github.com/ionic-team/ionic-framework/issues/28422)) ([0854a11](https://github.com/ionic-team/ionic-framework/commit/0854a11a25759d0201eae66c96a62fe138d486f8)), closes [#28256](https://github.com/ionic-team/ionic-framework/issues/28256) +* **animation:** add stronger types to Animation interface ([#28334](https://github.com/ionic-team/ionic-framework/issues/28334)) ([4a088d5](https://github.com/ionic-team/ionic-framework/commit/4a088d5d612ab0387064d388b37d46cdf15cf1ff)) +* **animation:** progressEnd coercion is reset before onFinish ([#28394](https://github.com/ionic-team/ionic-framework/issues/28394)) ([eae8162](https://github.com/ionic-team/ionic-framework/commit/eae8162d0dc2e0bd7a9d56a3662a8e5f5d142b72)), closes [#28393](https://github.com/ionic-team/ionic-framework/issues/28393) +* **infinite-scroll:** remaining in threshold after ionInfinite can trigger event again on scroll ([#28569](https://github.com/ionic-team/ionic-framework/issues/28569)) ([8c235fd](https://github.com/ionic-team/ionic-framework/commit/8c235fd30c50f317de1f37f69068507aa0979068)), closes [#18071](https://github.com/ionic-team/ionic-framework/issues/18071) +* **item:** allow item to grow when it is used in a flex container ([#28594](https://github.com/ionic-team/ionic-framework/issues/28594)) ([1c1b567](https://github.com/ionic-team/ionic-framework/commit/1c1b567279dee44da70bb9b90c129946c9043987)) +* **item:** wrap elements and label contents when the font size increases or the elements do not fit ([#28146](https://github.com/ionic-team/ionic-framework/issues/28146)) ([6438e3e](https://github.com/ionic-team/ionic-framework/commit/6438e3e919c665569b731a2d74fe1547b4f3c1cc)) +* **select:** do not collapse to width: 0 when placed in flex container ([#28631](https://github.com/ionic-team/ionic-framework/issues/28631)) ([e71e7a0](https://github.com/ionic-team/ionic-framework/commit/e71e7a069000db8738abc304758de64286817442)) +* **toast:** add swipeGesture to ToastOptions ([#28518](https://github.com/ionic-team/ionic-framework/issues/28518)) ([4ad6df6](https://github.com/ionic-team/ionic-framework/commit/4ad6df67f01cebce30d4da46c7541c4b14c5d4a4)) + + +### Features + +* **checkbox:** add shadow part for label ([#28604](https://github.com/ionic-team/ionic-framework/issues/28604)) ([f9f5654](https://github.com/ionic-team/ionic-framework/commit/f9f5654ab0e920bf97089fbabfb9eedbcf6fe8ae)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300) +* **input, textarea, select:** add start and end slots ([#28583](https://github.com/ionic-team/ionic-framework/issues/28583)) ([357b8b2](https://github.com/ionic-team/ionic-framework/commit/357b8b2beb29b95d53ef043af349067be1d32658)), closes [#26297](https://github.com/ionic-team/ionic-framework/issues/26297) +* **radio-group:** add compareWith property ([#28452](https://github.com/ionic-team/ionic-framework/issues/28452)) ([0ae327f](https://github.com/ionic-team/ionic-framework/commit/0ae327f0e09cd97d705f2d3051c215034381e226)) +* **radio:** add shadow part for label ([#28607](https://github.com/ionic-team/ionic-framework/issues/28607)) ([b757970](https://github.com/ionic-team/ionic-framework/commit/b757970d23e87c59aa883ecb1bfa9b66bcae8de2)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300) +* **range:** expose label wrapper as shadow part ([#28601](https://github.com/ionic-team/ionic-framework/issues/28601)) ([52ed2bf](https://github.com/ionic-team/ionic-framework/commit/52ed2bf63777c764f57bb4c3a5d4a127bff46c50)) +* **toast:** add swipe to dismiss functionality ([#28442](https://github.com/ionic-team/ionic-framework/issues/28442)) ([30c21aa](https://github.com/ionic-team/ionic-framework/commit/30c21aab3ed40d73c28e7d60d0952d8891b0a9d3)), closes [#21769](https://github.com/ionic-team/ionic-framework/issues/21769) +* **toggle:** expose label wrapper as shadow part ([#28585](https://github.com/ionic-team/ionic-framework/issues/28585)) ([a34188f](https://github.com/ionic-team/ionic-framework/commit/a34188f7dbec4a16e4f2043ed3dc096e337725a7)) + + + + + ## [7.5.8](https://github.com/ionic-team/ionic-framework/compare/v7.5.7...v7.5.8) (2023-12-06) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 5b55b5147e..59c04e5ac6 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,35 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06) + + +### Bug Fixes + +* **angular,vue:** range form value updates while dragging knob ([#28422](https://github.com/ionic-team/ionic-framework/issues/28422)) ([0854a11](https://github.com/ionic-team/ionic-framework/commit/0854a11a25759d0201eae66c96a62fe138d486f8)), closes [#28256](https://github.com/ionic-team/ionic-framework/issues/28256) +* **animation:** add stronger types to Animation interface ([#28334](https://github.com/ionic-team/ionic-framework/issues/28334)) ([4a088d5](https://github.com/ionic-team/ionic-framework/commit/4a088d5d612ab0387064d388b37d46cdf15cf1ff)) +* **animation:** progressEnd coercion is reset before onFinish ([#28394](https://github.com/ionic-team/ionic-framework/issues/28394)) ([eae8162](https://github.com/ionic-team/ionic-framework/commit/eae8162d0dc2e0bd7a9d56a3662a8e5f5d142b72)), closes [#28393](https://github.com/ionic-team/ionic-framework/issues/28393) +* **infinite-scroll:** remaining in threshold after ionInfinite can trigger event again on scroll ([#28569](https://github.com/ionic-team/ionic-framework/issues/28569)) ([8c235fd](https://github.com/ionic-team/ionic-framework/commit/8c235fd30c50f317de1f37f69068507aa0979068)), closes [#18071](https://github.com/ionic-team/ionic-framework/issues/18071) +* **item:** allow item to grow when it is used in a flex container ([#28594](https://github.com/ionic-team/ionic-framework/issues/28594)) ([1c1b567](https://github.com/ionic-team/ionic-framework/commit/1c1b567279dee44da70bb9b90c129946c9043987)) +* **item:** wrap elements and label contents when the font size increases or the elements do not fit ([#28146](https://github.com/ionic-team/ionic-framework/issues/28146)) ([6438e3e](https://github.com/ionic-team/ionic-framework/commit/6438e3e919c665569b731a2d74fe1547b4f3c1cc)) +* **select:** do not collapse to width: 0 when placed in flex container ([#28631](https://github.com/ionic-team/ionic-framework/issues/28631)) ([e71e7a0](https://github.com/ionic-team/ionic-framework/commit/e71e7a069000db8738abc304758de64286817442)) +* **toast:** add swipeGesture to ToastOptions ([#28518](https://github.com/ionic-team/ionic-framework/issues/28518)) ([4ad6df6](https://github.com/ionic-team/ionic-framework/commit/4ad6df67f01cebce30d4da46c7541c4b14c5d4a4)) + + +### Features + +* **checkbox:** add shadow part for label ([#28604](https://github.com/ionic-team/ionic-framework/issues/28604)) ([f9f5654](https://github.com/ionic-team/ionic-framework/commit/f9f5654ab0e920bf97089fbabfb9eedbcf6fe8ae)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300) +* **input, textarea, select:** add start and end slots ([#28583](https://github.com/ionic-team/ionic-framework/issues/28583)) ([357b8b2](https://github.com/ionic-team/ionic-framework/commit/357b8b2beb29b95d53ef043af349067be1d32658)), closes [#26297](https://github.com/ionic-team/ionic-framework/issues/26297) +* **radio-group:** add compareWith property ([#28452](https://github.com/ionic-team/ionic-framework/issues/28452)) ([0ae327f](https://github.com/ionic-team/ionic-framework/commit/0ae327f0e09cd97d705f2d3051c215034381e226)) +* **radio:** add shadow part for label ([#28607](https://github.com/ionic-team/ionic-framework/issues/28607)) ([b757970](https://github.com/ionic-team/ionic-framework/commit/b757970d23e87c59aa883ecb1bfa9b66bcae8de2)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300) +* **range:** expose label wrapper as shadow part ([#28601](https://github.com/ionic-team/ionic-framework/issues/28601)) ([52ed2bf](https://github.com/ionic-team/ionic-framework/commit/52ed2bf63777c764f57bb4c3a5d4a127bff46c50)) +* **toast:** add swipe to dismiss functionality ([#28442](https://github.com/ionic-team/ionic-framework/issues/28442)) ([30c21aa](https://github.com/ionic-team/ionic-framework/commit/30c21aab3ed40d73c28e7d60d0952d8891b0a9d3)), closes [#21769](https://github.com/ionic-team/ionic-framework/issues/21769) +* **toggle:** expose label wrapper as shadow part ([#28585](https://github.com/ionic-team/ionic-framework/issues/28585)) ([a34188f](https://github.com/ionic-team/ionic-framework/commit/a34188f7dbec4a16e4f2043ed3dc096e337725a7)) + + + + + ## [7.5.8](https://github.com/ionic-team/ionic-framework/compare/v7.5.7...v7.5.8) (2023-12-06) diff --git a/core/api.txt b/core/api.txt index d54e7a6f40..320c0fc187 100644 --- a/core/api.txt +++ b/core/api.txt @@ -315,6 +315,7 @@ ion-checkbox,css-prop,--checkmark-width ion-checkbox,css-prop,--size ion-checkbox,css-prop,--transition ion-checkbox,part,container +ion-checkbox,part,label ion-checkbox,part,mark ion-chip,shadow @@ -1029,10 +1030,12 @@ ion-radio,css-prop,--color ion-radio,css-prop,--color-checked ion-radio,css-prop,--inner-border-radius ion-radio,part,container +ion-radio,part,label ion-radio,part,mark ion-radio-group,none ion-radio-group,prop,allowEmptySelection,boolean,false,false,false +ion-radio-group,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false ion-radio-group,prop,name,string,this.inputId,false,false ion-radio-group,prop,value,any,undefined,false,false ion-radio-group,event,ionChange,RadioGroupChangeEventDetail,true @@ -1076,6 +1079,7 @@ ion-range,css-prop,--pin-color ion-range,part,bar ion-range,part,bar-active ion-range,part,knob +ion-range,part,label ion-range,part,pin ion-range,part,tick ion-range,part,tick-active @@ -1446,6 +1450,7 @@ ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,fals ion-toast,prop,mode,"ios" | "md",undefined,false,false ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false +ion-toast,prop,swipeGesture,"vertical" | undefined,undefined,false,false ion-toast,prop,translucent,boolean,false,false,false ion-toast,prop,trigger,string | undefined,undefined,false,false ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise @@ -1512,6 +1517,7 @@ ion-toggle,css-prop,--handle-width ion-toggle,css-prop,--track-background ion-toggle,css-prop,--track-background-checked ion-toggle,part,handle +ion-toggle,part,label ion-toggle,part,track ion-toolbar,shadow diff --git a/core/package-lock.json b/core/package-lock.json index b49629a26e..d31c9bfd61 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/core", - "version": "7.5.8", + "version": "7.6.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "7.5.8", + "version": "7.6.0", "license": "MIT", "dependencies": { "@stencil/core": "^4.8.1", diff --git a/core/package.json b/core/package.json index a5f8cabdc9..fb4ec3645f 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "7.5.8", + "version": "7.6.0", "description": "Base components for Ionic", "keywords": [ "ionic", diff --git a/core/setupJest.js b/core/setupJest.js new file mode 100644 index 0000000000..f2eb0e70a3 --- /dev/null +++ b/core/setupJest.js @@ -0,0 +1,21 @@ +expect.extend({ + toHaveShadowPart(received, part) { + if (typeof part !== 'string') { + throw new Error('expected toHaveShadowPart to be called with a string of the CSS shadow part name'); + } + + if (received.shadowRoot === null) { + throw new Error('expected toHaveShadowPart to be called on an element with a shadow root'); + } + + const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`); + const pass = shadowPart !== null; + + const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`; + + return { + pass, + message: () => message, + }; + }, +}); diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 885ff656c6..dcfee8f33e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -27,7 +27,7 @@ import { PickerButton, PickerColumn } from "./components/picker/picker-interface import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces"; import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces"; import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface"; -import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface"; +import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface"; import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface"; import { RefresherEventDetail } from "./components/refresher/refresher-interface"; import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface"; @@ -39,7 +39,7 @@ import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com import { SelectPopoverOption } from "./components/select-popover/select-popover-interface"; import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface"; import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface"; -import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface"; +import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface"; import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface"; export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface"; export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface"; @@ -63,7 +63,7 @@ export { PickerButton, PickerColumn } from "./components/picker/picker-interface export { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces"; export { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces"; export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface"; -export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface"; +export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface"; export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface"; export { RefresherEventDetail } from "./components/refresher/refresher-interface"; export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface"; @@ -75,7 +75,7 @@ export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com export { SelectPopoverOption } from "./components/select-popover/select-popover-interface"; export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface"; export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface"; -export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface"; +export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface"; export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface"; export namespace Components { interface IonAccordion { @@ -2269,6 +2269,10 @@ export namespace Components { * If `true`, the radios can be deselected. */ "allowEmptySelection": boolean; + /** + * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison. + */ + "compareWith"?: string | RadioGroupCompareFn | null; /** * The name of the control, which is submitted with the form data. */ @@ -2688,7 +2692,7 @@ export namespace Components { */ "color"?: Color; /** - * A property name or function used to compare object values + * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison. */ "compareWith"?: string | SelectCompareFn | null; /** @@ -3172,6 +3176,10 @@ export namespace Components { * Present the toast overlay after it has been created. */ "present": () => Promise; + /** + * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss. + */ + "swipeGesture"?: ToastSwipeGestureDirection; /** * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @@ -3390,6 +3398,10 @@ export interface IonSelectCustomEvent extends CustomEvent { detail: T; target: HTMLIonSelectElement; } +export interface IonSkeletonTextCustomEvent extends CustomEvent { + detail: T; + target: HTMLIonSkeletonTextElement; +} export interface IonSplitPaneCustomEvent extends CustomEvent { detail: T; target: HTMLIonSplitPaneElement; @@ -4404,7 +4416,18 @@ declare global { prototype: HTMLIonSelectPopoverElement; new (): HTMLIonSelectPopoverElement; }; + interface HTMLIonSkeletonTextElementEventMap { + "ionStyle": StyleEventDetail; + } interface HTMLIonSkeletonTextElement extends Components.IonSkeletonText, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonSkeletonTextElement, ev: IonSkeletonTextCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonSkeletonTextElement, ev: IonSkeletonTextCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIonSkeletonTextElement: { prototype: HTMLIonSkeletonTextElement; @@ -6934,6 +6957,10 @@ declare namespace LocalJSX { * If `true`, the radios can be deselected. */ "allowEmptySelection"?: boolean; + /** + * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison. + */ + "compareWith"?: string | RadioGroupCompareFn | null; /** * The name of the control, which is submitted with the form data. */ @@ -7416,7 +7443,7 @@ declare namespace LocalJSX { */ "color"?: Color; /** - * A property name or function used to compare object values + * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison. */ "compareWith"?: string | SelectCompareFn | null; /** @@ -7553,6 +7580,10 @@ declare namespace LocalJSX { * If `true`, the skeleton text will animate. */ "animated"?: boolean; + /** + * Emitted when the styles change. + */ + "onIonStyle"?: (event: IonSkeletonTextCustomEvent) => void; } interface IonSpinner { /** @@ -7951,6 +7982,10 @@ declare namespace LocalJSX { * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored. */ "positionAnchor"?: HTMLElement | string; + /** + * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss. + */ + "swipeGesture"?: ToastSwipeGestureDirection; /** * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png index 4df0af8873..d374cb54e1 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index c5b8030e84..4119c7d754 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -90,13 +90,6 @@ } .label-text-wrapper { - /** - * This ensures that double tapping this text - * clicks the