@kirbydesign/designsystem 12.0.0-dev-67d5287 → 12.0.0-dev-286cdc0

package/fesm2022/kirbydesign-designsystem-item-group.mjs

@@ -7,7 +7,7 @@ var ItemGroupComponent = class ItemGroupComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ItemGroupComponent,
 			deps: [],
@@ -17,7 +17,7 @@ var ItemGroupComponent = class ItemGroupComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ItemGroupComponent,
 			isStandalone: true,
 			selector: "kirby-item-group",
@@ -31,7 +31,7 @@ var ItemGroupComponent = class ItemGroupComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ItemGroupComponent,
 	decorators: [{

package/fesm2022/kirbydesign-designsystem-item-sliding.mjs

@@ -22,7 +22,7 @@ var ItemSlidingComponent = class ItemSlidingComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ItemSlidingComponent,
 			deps: [],
@@ -32,7 +32,7 @@ var ItemSlidingComponent = class ItemSlidingComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ItemSlidingComponent,
 			isStandalone: true,
 			selector: "kirby-item-sliding",
@@ -114,7 +114,7 @@ var ItemSlidingComponent = class ItemSlidingComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ItemSlidingComponent,
 	decorators: [{

package/fesm2022/kirbydesign-designsystem-item.mjs

@@ -57,7 +57,7 @@ var ItemComponent = class ItemComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ItemComponent,
 			deps: [
@@ -72,7 +72,7 @@ var ItemComponent = class ItemComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ItemComponent,
 			isStandalone: true,
 			selector: "kirby-item",
@@ -134,7 +134,7 @@ var ItemComponent = class ItemComponent {
 			}],
 			ngImport: i0,
 			template: "<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px}:host.xs ion-item:not(:has(kirby-checkbox,kirby-radio)){--inner-padding-top: var(--kirby-spacing-xxxs);--inner-padding-bottom: var(--kirby-spacing-xxxs)}:host .outside{--kirby-badge-font-size: 10px;display:flex;width:var(--kirby-relative-size-s);margin:0;position:absolute;left:var(--kirby-spacing-xxxs);z-index:1}ion-item::part(native){border-radius:var(--kirby-content-border-top-radius, 0) var(--kirby-content-border-top-radius, 0) var(--kirby-content-border-bottom-radius, 0) var(--kirby-content-border-bottom-radius, 0)}ion-item::part(native):focus-visible{box-shadow:var(--kirby-focus-ring-md-inset)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: var(--kirby-spacing-s);--inner-padding-top: var(--kirby-spacing-xxs);--inner-padding-bottom: var(--kirby-spacing-xxs);--inner-padding-end: var(--kirby-spacing-s);--color: var(--kirby-color-content-base);--color-hover: var(--kirby-color-content-base-hover);--background: var(--kirby-item-background, var(--kirby-color-fill-base));--background-hover: var(--kirby-color-fill-base-hover);--background-hover-opacity: 1;--background-focused: var(--kirby-item-background-focused, var(--kirby-color-fill-base));--background-focused-opacity: 1;font-size:var(--kirby-font-size-n)}ion-item.ion-activated{--background-hover: var(--kirby-color-fill-base-active);--color-hover: var(--kirby-color-content-base-active)}@media screen and (orientation:landscape){ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}ion-item ::ng-deep>[slot=end]{text-align:end}ion-item ::ng-deep>[slot=end] kirby-label{text-align:start}ion-item ::ng-deep>time[slot=end]{margin-inline-start:var(--kirby-spacing-xs)}ion-item ::ng-deep>data[slot=end],ion-item ::ng-deep>[detail][slot=end],ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:var(--kirby-spacing-s)}ion-item ::ng-deep>h1,ion-item ::ng-deep>h2,ion-item ::ng-deep>h3,ion-item ::ng-deep>h4,ion-item ::ng-deep>h5,ion-item ::ng-deep>h6,ion-item ::ng-deep>data,ion-item ::ng-deep>p{color:var(--kirby-color-content-base);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s)}ion-item ::ng-deep>:where(.kirby-item-title),ion-item ::ng-deep>:where(h1),ion-item ::ng-deep>:where(h2),ion-item ::ng-deep>:where(h3),ion-item ::ng-deep>:where(h4),ion-item ::ng-deep>:where(h5),ion-item ::ng-deep>:where(h6),ion-item ::ng-deep>:where(data){font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n);font-weight:400}ion-item ::ng-deep>[subtitle],ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-subtitle,ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs)}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:var(--kirby-spacing-xxxs)}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{color:var(--kirby-color-content-base-quiet)}ion-item ::ng-deep>.kirby-item-disclosure{display:flex;align-items:center}ion-item .kirby-item-disclosure kirby-icon{color:var(--kirby-color-content-base-quiet);transform:translate(var(--kirby-spacing-xxxs))}ion-item ::ng-deep>[wrap],ion-item ::ng-deep>.kirby-item-wrap{white-space:normal}@media(max-width:767px){ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item ::ng-deep>.kirby-item-title:not(.kirby-item-wrap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:initial;text-overflow:ellipsis}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)){--item-padding-top: var(--kirby-spacing-xxs);--inner-padding-top: 0;--inner-padding-end: var( --kirby-spacing-l )}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) ::ng-deep>[slot=end],ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)) ::ng-deep>[slot=end]{margin-inline-start:initial}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(item-inner),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(item-inner){position:initial;gap:var(--kirby-spacing-xs)}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(input-wrapper),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(input-wrapper){justify-content:center}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(native),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(native){flex-direction:column;align-items:flex-start}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .disclosure,ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)) .disclosure{position:absolute;right:var(--kirby-spacing-xxs);top:calc(var(--item-padding-top) + .5lh - var(--kirby-spacing-xs));font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .outside{top:calc(var(--item-padding-top) + var(--kirby-spacing-xxxxs) + var(--kirby-spacing-s))}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .disclosure{top:calc(var(--item-padding-top) + var(--kirby-spacing-xxxxs) + var(--kirby-spacing-xxs))}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:not(:has([slot=start]:not(.outside))):has([slot=end]:not(.disclosure)) .outside{align-items:start;top:calc(var(--item-padding-top) + .5lh - var(--kirby-spacing-xxxs) * .5)}}ion-item ::ng-deep>:not([slot]){width:100%}ion-item ::ng-deep>input[slot=end],ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:var(--kirby-spacing-s);width:auto;text-align:end}ion-item{--transition: background-color, opacity 80ms linear 0ms}ion-item:has(kirby-checkbox,kirby-radio){--inner-padding-top: 0;--inner-padding-bottom: 0}ion-item:has(kirby-checkbox:not([slot]),kirby-radio:not([slot])){overflow:inherit}ion-item:has(.checkbox-disabled,.radio-disabled,.toggle-disabled){pointer-events:none}.disclosure{--kirby-icon-font-size: var(--kirby-spacing-m);padding-left:var(--kirby-spacing-xxxs);color:var(--kirby-color-content-base-quiet);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform var(--kirby-transition-duration-quick)}.disclosure kirby-icon.rotate{transform:rotate(180deg)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-menu) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host(.keyboard-focused) ion-item::part(native),:host-context(kirby-popover .keyboard-focused) ion-item::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}:host(.disabled),:host([disabled]){pointer-events:none}:host(.disabled) ion-item,:host([disabled]) ion-item{opacity:.4}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:var(--kirby-font-weight-bold)}:host(.disclosure) ion-item{--inner-padding-end: var(--kirby-spacing-xxs)}:host-context(kirby-card-header) ion-item{--background: transparent}\n"],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px}:host.xs ion-item:not(:has(kirby-checkbox,kirby-radio)){--inner-padding-top: var(--kirby-spacing-xxxs);--inner-padding-bottom: var(--kirby-spacing-xxxs)}:host .outside{--kirby-badge-font-size: 10px;display:flex;width:var(--kirby-relative-size-s);margin:0;position:absolute;left:var(--kirby-spacing-xxxs);z-index:1}ion-item::part(native){border-radius:var(--kirby-content-border-top-radius, 0) var(--kirby-content-border-top-radius, 0) var(--kirby-content-border-bottom-radius, 0) var(--kirby-content-border-bottom-radius, 0)}ion-item::part(native):focus-visible{box-shadow:var(--kirby-focus-ring-md-inset)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: var(--kirby-spacing-s);--inner-padding-top: var(--kirby-spacing-xxs);--inner-padding-bottom: var(--kirby-spacing-xxs);--inner-padding-end: var(--kirby-spacing-s);--color: var(--kirby-color-content-base);--color-hover: var(--kirby-color-content-base-hover);--background: var(--kirby-item-background, var(--kirby-color-fill-base));--background-hover: var(--kirby-color-fill-base-hover);--background-hover-opacity: 1;--background-activated: var(--kirby-color-fill-base-active);--background-activated-opacity: 1;--color-activated: var(--kirby-color-content-base-active);--background-focused: var(--kirby-item-background-focused, var(--kirby-color-fill-base));--background-focused-opacity: 1;font-size:var(--kirby-font-size-n)}ion-item:active,ion-item.ion-activated{--background-hover: var(--kirby-color-fill-base-active);--color-hover: var(--kirby-color-content-base-active)}@media screen and (orientation:landscape){ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}ion-item ::ng-deep>[slot=end]{text-align:end}ion-item ::ng-deep>[slot=end] kirby-label{text-align:start}ion-item ::ng-deep>time[slot=end]{margin-inline-start:var(--kirby-spacing-xs)}ion-item ::ng-deep>data[slot=end],ion-item ::ng-deep>[detail][slot=end],ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:var(--kirby-spacing-s)}ion-item ::ng-deep>h1,ion-item ::ng-deep>h2,ion-item ::ng-deep>h3,ion-item ::ng-deep>h4,ion-item ::ng-deep>h5,ion-item ::ng-deep>h6,ion-item ::ng-deep>data,ion-item ::ng-deep>p{color:var(--kirby-color-content-base);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s)}ion-item ::ng-deep>:where(.kirby-item-title),ion-item ::ng-deep>:where(h1),ion-item ::ng-deep>:where(h2),ion-item ::ng-deep>:where(h3),ion-item ::ng-deep>:where(h4),ion-item ::ng-deep>:where(h5),ion-item ::ng-deep>:where(h6),ion-item ::ng-deep>:where(data){font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n);font-weight:400}ion-item ::ng-deep>[subtitle],ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-subtitle,ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs)}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:var(--kirby-spacing-xxxs)}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{color:var(--kirby-color-content-base-quiet)}ion-item ::ng-deep>.kirby-item-disclosure{display:flex;align-items:center}ion-item .kirby-item-disclosure kirby-icon{color:var(--kirby-color-content-base-quiet);transform:translate(var(--kirby-spacing-xxxs))}ion-item ::ng-deep>[wrap],ion-item ::ng-deep>.kirby-item-wrap{white-space:normal}@media(max-width:767px){ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item ::ng-deep>.kirby-item-title:not(.kirby-item-wrap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:initial;text-overflow:ellipsis}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)){--item-padding-top: var(--kirby-spacing-xxs);--inner-padding-top: 0;--inner-padding-end: var( --kirby-spacing-l )}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) ::ng-deep>[slot=end],ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)) ::ng-deep>[slot=end]{margin-inline-start:initial}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(item-inner),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(item-inner){position:initial;gap:var(--kirby-spacing-xs)}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(input-wrapper),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(input-wrapper){justify-content:center}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(native),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(native){flex-direction:column;align-items:flex-start}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .disclosure,ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)) .disclosure{position:absolute;right:var(--kirby-spacing-xxs);top:calc(var(--item-padding-top) + .5lh - var(--kirby-spacing-xs));font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .outside{top:calc(var(--item-padding-top) + var(--kirby-spacing-xxxxs) + var(--kirby-spacing-s))}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .disclosure{top:calc(var(--item-padding-top) + var(--kirby-spacing-xxxxs) + var(--kirby-spacing-xxs))}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:not(:has([slot=start]:not(.outside))):has([slot=end]:not(.disclosure)) .outside{align-items:start;top:calc(var(--item-padding-top) + .5lh - var(--kirby-spacing-xxxs) * .5)}}ion-item ::ng-deep>:not([slot]){width:100%}ion-item ::ng-deep>input[slot=end],ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:var(--kirby-spacing-s);width:auto;text-align:end}ion-item{--transition: background-color, opacity 80ms linear 0ms}ion-item:has(kirby-checkbox,kirby-radio){--inner-padding-top: 0;--inner-padding-bottom: 0}ion-item:has(kirby-checkbox:not([slot]),kirby-radio:not([slot])){overflow:inherit}ion-item:has(.checkbox-disabled,.radio-disabled,.toggle-disabled){pointer-events:none}.disclosure{--kirby-icon-font-size: var(--kirby-spacing-m);padding-left:var(--kirby-spacing-xxxs);color:var(--kirby-color-content-base-quiet);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform var(--kirby-transition-duration-quick)}.disclosure kirby-icon.rotate{transform:rotate(180deg)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-menu) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host(.keyboard-focused) ion-item::part(native),:host-context(kirby-popover .keyboard-focused) ion-item::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}:host(.disabled),:host([disabled]){pointer-events:none}:host(.disabled) ion-item,:host([disabled]) ion-item{opacity:var(--kirby-opacity-40)}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:var(--kirby-font-weight-bold)}:host(.disclosure) ion-item{--inner-padding-end: var(--kirby-spacing-xxs)}:host-context(kirby-card-header) ion-item{--background: transparent}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -175,7 +175,7 @@ var ItemComponent = class ItemComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ItemComponent,
 	decorators: [{
@@ -190,7 +190,7 @@ i0.ɵɵngDeclareClassMetadata({
 				IconComponent
 			],
 			template: "<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px}:host.xs ion-item:not(:has(kirby-checkbox,kirby-radio)){--inner-padding-top: var(--kirby-spacing-xxxs);--inner-padding-bottom: var(--kirby-spacing-xxxs)}:host .outside{--kirby-badge-font-size: 10px;display:flex;width:var(--kirby-relative-size-s);margin:0;position:absolute;left:var(--kirby-spacing-xxxs);z-index:1}ion-item::part(native){border-radius:var(--kirby-content-border-top-radius, 0) var(--kirby-content-border-top-radius, 0) var(--kirby-content-border-bottom-radius, 0) var(--kirby-content-border-bottom-radius, 0)}ion-item::part(native):focus-visible{box-shadow:var(--kirby-focus-ring-md-inset)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: var(--kirby-spacing-s);--inner-padding-top: var(--kirby-spacing-xxs);--inner-padding-bottom: var(--kirby-spacing-xxs);--inner-padding-end: var(--kirby-spacing-s);--color: var(--kirby-color-content-base);--color-hover: var(--kirby-color-content-base-hover);--background: var(--kirby-item-background, var(--kirby-color-fill-base));--background-hover: var(--kirby-color-fill-base-hover);--background-hover-opacity: 1;--background-focused: var(--kirby-item-background-focused, var(--kirby-color-fill-base));--background-focused-opacity: 1;font-size:var(--kirby-font-size-n)}ion-item.ion-activated{--background-hover: var(--kirby-color-fill-base-active);--color-hover: var(--kirby-color-content-base-active)}@media screen and (orientation:landscape){ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}ion-item ::ng-deep>[slot=end]{text-align:end}ion-item ::ng-deep>[slot=end] kirby-label{text-align:start}ion-item ::ng-deep>time[slot=end]{margin-inline-start:var(--kirby-spacing-xs)}ion-item ::ng-deep>data[slot=end],ion-item ::ng-deep>[detail][slot=end],ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:var(--kirby-spacing-s)}ion-item ::ng-deep>h1,ion-item ::ng-deep>h2,ion-item ::ng-deep>h3,ion-item ::ng-deep>h4,ion-item ::ng-deep>h5,ion-item ::ng-deep>h6,ion-item ::ng-deep>data,ion-item ::ng-deep>p{color:var(--kirby-color-content-base);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s)}ion-item ::ng-deep>:where(.kirby-item-title),ion-item ::ng-deep>:where(h1),ion-item ::ng-deep>:where(h2),ion-item ::ng-deep>:where(h3),ion-item ::ng-deep>:where(h4),ion-item ::ng-deep>:where(h5),ion-item ::ng-deep>:where(h6),ion-item ::ng-deep>:where(data){font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n);font-weight:400}ion-item ::ng-deep>[subtitle],ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-subtitle,ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs)}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:var(--kirby-spacing-xxxs)}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{color:var(--kirby-color-content-base-quiet)}ion-item ::ng-deep>.kirby-item-disclosure{display:flex;align-items:center}ion-item .kirby-item-disclosure kirby-icon{color:var(--kirby-color-content-base-quiet);transform:translate(var(--kirby-spacing-xxxs))}ion-item ::ng-deep>[wrap],ion-item ::ng-deep>.kirby-item-wrap{white-space:normal}@media(max-width:767px){ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item ::ng-deep>.kirby-item-title:not(.kirby-item-wrap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:initial;text-overflow:ellipsis}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)){--item-padding-top: var(--kirby-spacing-xxs);--inner-padding-top: 0;--inner-padding-end: var( --kirby-spacing-l )}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) ::ng-deep>[slot=end],ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)) ::ng-deep>[slot=end]{margin-inline-start:initial}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(item-inner),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(item-inner){position:initial;gap:var(--kirby-spacing-xs)}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(input-wrapper),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(input-wrapper){justify-content:center}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(native),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(native){flex-direction:column;align-items:flex-start}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .disclosure,ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)) .disclosure{position:absolute;right:var(--kirby-spacing-xxs);top:calc(var(--item-padding-top) + .5lh - var(--kirby-spacing-xs));font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .outside{top:calc(var(--item-padding-top) + var(--kirby-spacing-xxxxs) + var(--kirby-spacing-s))}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .disclosure{top:calc(var(--item-padding-top) + var(--kirby-spacing-xxxxs) + var(--kirby-spacing-xxs))}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:not(:has([slot=start]:not(.outside))):has([slot=end]:not(.disclosure)) .outside{align-items:start;top:calc(var(--item-padding-top) + .5lh - var(--kirby-spacing-xxxs) * .5)}}ion-item ::ng-deep>:not([slot]){width:100%}ion-item ::ng-deep>input[slot=end],ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:var(--kirby-spacing-s);width:auto;text-align:end}ion-item{--transition: background-color, opacity 80ms linear 0ms}ion-item:has(kirby-checkbox,kirby-radio){--inner-padding-top: 0;--inner-padding-bottom: 0}ion-item:has(kirby-checkbox:not([slot]),kirby-radio:not([slot])){overflow:inherit}ion-item:has(.checkbox-disabled,.radio-disabled,.toggle-disabled){pointer-events:none}.disclosure{--kirby-icon-font-size: var(--kirby-spacing-m);padding-left:var(--kirby-spacing-xxxs);color:var(--kirby-color-content-base-quiet);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform var(--kirby-transition-duration-quick)}.disclosure kirby-icon.rotate{transform:rotate(180deg)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-menu) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host(.keyboard-focused) ion-item::part(native),:host-context(kirby-popover .keyboard-focused) ion-item::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}:host(.disabled),:host([disabled]){pointer-events:none}:host(.disabled) ion-item,:host([disabled]) ion-item{opacity:.4}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:var(--kirby-font-weight-bold)}:host(.disclosure) ion-item{--inner-padding-end: var(--kirby-spacing-xxs)}:host-context(kirby-card-header) ion-item{--background: transparent}\n"]
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px}:host.xs ion-item:not(:has(kirby-checkbox,kirby-radio)){--inner-padding-top: var(--kirby-spacing-xxxs);--inner-padding-bottom: var(--kirby-spacing-xxxs)}:host .outside{--kirby-badge-font-size: 10px;display:flex;width:var(--kirby-relative-size-s);margin:0;position:absolute;left:var(--kirby-spacing-xxxs);z-index:1}ion-item::part(native){border-radius:var(--kirby-content-border-top-radius, 0) var(--kirby-content-border-top-radius, 0) var(--kirby-content-border-bottom-radius, 0) var(--kirby-content-border-bottom-radius, 0)}ion-item::part(native):focus-visible{box-shadow:var(--kirby-focus-ring-md-inset)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: var(--kirby-spacing-s);--inner-padding-top: var(--kirby-spacing-xxs);--inner-padding-bottom: var(--kirby-spacing-xxs);--inner-padding-end: var(--kirby-spacing-s);--color: var(--kirby-color-content-base);--color-hover: var(--kirby-color-content-base-hover);--background: var(--kirby-item-background, var(--kirby-color-fill-base));--background-hover: var(--kirby-color-fill-base-hover);--background-hover-opacity: 1;--background-activated: var(--kirby-color-fill-base-active);--background-activated-opacity: 1;--color-activated: var(--kirby-color-content-base-active);--background-focused: var(--kirby-item-background-focused, var(--kirby-color-fill-base));--background-focused-opacity: 1;font-size:var(--kirby-font-size-n)}ion-item:active,ion-item.ion-activated{--background-hover: var(--kirby-color-fill-base-active);--color-hover: var(--kirby-color-content-base-active)}@media screen and (orientation:landscape){ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}ion-item ::ng-deep>[slot=end]{text-align:end}ion-item ::ng-deep>[slot=end] kirby-label{text-align:start}ion-item ::ng-deep>time[slot=end]{margin-inline-start:var(--kirby-spacing-xs)}ion-item ::ng-deep>data[slot=end],ion-item ::ng-deep>[detail][slot=end],ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:var(--kirby-spacing-s)}ion-item ::ng-deep>h1,ion-item ::ng-deep>h2,ion-item ::ng-deep>h3,ion-item ::ng-deep>h4,ion-item ::ng-deep>h5,ion-item ::ng-deep>h6,ion-item ::ng-deep>data,ion-item ::ng-deep>p{color:var(--kirby-color-content-base);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s)}ion-item ::ng-deep>:where(.kirby-item-title),ion-item ::ng-deep>:where(h1),ion-item ::ng-deep>:where(h2),ion-item ::ng-deep>:where(h3),ion-item ::ng-deep>:where(h4),ion-item ::ng-deep>:where(h5),ion-item ::ng-deep>:where(h6),ion-item ::ng-deep>:where(data){font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n);font-weight:400}ion-item ::ng-deep>[subtitle],ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-subtitle,ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs)}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:var(--kirby-spacing-xxxs)}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{color:var(--kirby-color-content-base-quiet)}ion-item ::ng-deep>.kirby-item-disclosure{display:flex;align-items:center}ion-item .kirby-item-disclosure kirby-icon{color:var(--kirby-color-content-base-quiet);transform:translate(var(--kirby-spacing-xxxs))}ion-item ::ng-deep>[wrap],ion-item ::ng-deep>.kirby-item-wrap{white-space:normal}@media(max-width:767px){ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item ::ng-deep>.kirby-item-title:not(.kirby-item-wrap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:initial;text-overflow:ellipsis}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)){--item-padding-top: var(--kirby-spacing-xxs);--inner-padding-top: 0;--inner-padding-end: var( --kirby-spacing-l )}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) ::ng-deep>[slot=end],ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)) ::ng-deep>[slot=end]{margin-inline-start:initial}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(item-inner),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(item-inner){position:initial;gap:var(--kirby-spacing-xs)}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(input-wrapper),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(input-wrapper){justify-content:center}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside))::part(native),ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure))::part(native){flex-direction:column;align-items:flex-start}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .disclosure,ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=end]:not(.disclosure)) .disclosure{position:absolute;right:var(--kirby-spacing-xxs);top:calc(var(--item-padding-top) + .5lh - var(--kirby-spacing-xs));font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .outside{top:calc(var(--item-padding-top) + var(--kirby-spacing-xxxxs) + var(--kirby-spacing-s))}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:has([slot=start]:not(.outside)) .disclosure{top:calc(var(--item-padding-top) + var(--kirby-spacing-xxxxs) + var(--kirby-spacing-xxs))}ion-item :host-context(.kirby-trt):not(:has(kirby-checkbox,kirby-radio,kirby-toggle,[kirby-button].icon-only)) ion-item:not(:has([slot=start]:not(.outside))):has([slot=end]:not(.disclosure)) .outside{align-items:start;top:calc(var(--item-padding-top) + .5lh - var(--kirby-spacing-xxxs) * .5)}}ion-item ::ng-deep>:not([slot]){width:100%}ion-item ::ng-deep>input[slot=end],ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:var(--kirby-spacing-s);width:auto;text-align:end}ion-item{--transition: background-color, opacity 80ms linear 0ms}ion-item:has(kirby-checkbox,kirby-radio){--inner-padding-top: 0;--inner-padding-bottom: 0}ion-item:has(kirby-checkbox:not([slot]),kirby-radio:not([slot])){overflow:inherit}ion-item:has(.checkbox-disabled,.radio-disabled,.toggle-disabled){pointer-events:none}.disclosure{--kirby-icon-font-size: var(--kirby-spacing-m);padding-left:var(--kirby-spacing-xxxs);color:var(--kirby-color-content-base-quiet);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform var(--kirby-transition-duration-quick)}.disclosure kirby-icon.rotate{transform:rotate(180deg)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-menu) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host(.keyboard-focused) ion-item::part(native),:host-context(kirby-popover .keyboard-focused) ion-item::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}:host(.disabled),:host([disabled]){pointer-events:none}:host(.disabled) ion-item,:host([disabled]) ion-item{opacity:var(--kirby-opacity-40)}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:var(--kirby-font-weight-bold)}:host(.disclosure) ion-item{--inner-padding-end: var(--kirby-spacing-xxs)}:host-context(kirby-card-header) ion-item{--background: transparent}\n"]
 		}]
 	}],
 	ctorParameters: () => [
@@ -271,7 +271,7 @@ var LabelComponent = class LabelComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: LabelComponent,
 			deps: [],
@@ -281,7 +281,7 @@ var LabelComponent = class LabelComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: LabelComponent,
 			isStandalone: true,
 			selector: "kirby-label",
@@ -306,7 +306,7 @@ var LabelComponent = class LabelComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: LabelComponent,
 	decorators: [{
@@ -332,7 +332,7 @@ var ItemModule = class ItemModule {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ItemModule,
 			deps: [],
@@ -342,7 +342,7 @@ var ItemModule = class ItemModule {
 	static {
 		this.ɵmod = i0.ɵɵngDeclareNgModule({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ItemModule,
 			imports: [
@@ -360,7 +360,7 @@ var ItemModule = class ItemModule {
 	static {
 		this.ɵinj = i0.ɵɵngDeclareInjector({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ItemModule,
 			imports: [
@@ -376,7 +376,7 @@ var ItemModule = class ItemModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ItemModule,
 	decorators: [{

package/fesm2022/kirbydesign-designsystem-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-item.mjs","names":[],"sources":["../../item/src/item.component.ts","../../item/src/item.component.html","../../item/src/label/label.component.ts","../../item/src/label/label.component.html","../../item/src/item.module.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\n\nimport { CheckboxComponent } from '@kirbydesign/designsystem/checkbox';\nimport { RadioComponent } from '@kirbydesign/designsystem/radio';\nimport { ToggleComponent } from '@kirbydesign/designsystem/toggle';\nimport { IonItem, IonReorder } from '@ionic/angular';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\n\nexport enum ItemSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n}\n\n@Component({\n  selector: 'kirby-item',\n  templateUrl: './item.component.html',\n  styleUrls: ['./item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [IonicElementPartHelper],\n  imports: [IonItem, IonReorder, IconComponent],\n})\nexport class ItemComponent implements AfterViewInit {\n  private _linkAttributesToForward = ['rel', 'target', 'download'];\n\n  @HostBinding('class.disabled')\n  @Input()\n  disabled: boolean;\n  @HostBinding('class.selected')\n  @Input()\n  selected: boolean;\n  @HostBinding('class.disclosure')\n  @Input()\n  disclosure: 'link' | 'arrow-more' | 'arrow-down' | 'arrow-up' | null;\n\n  private _selectable: boolean;\n  get selectable(): boolean {\n    return this._selectable;\n  }\n\n  @Input() set selectable(value: boolean) {\n    this._selectable = value;\n    this.cdr.markForCheck();\n  }\n\n  @Input()\n  reorderable: boolean;\n  @HostBinding('class')\n  @Input()\n  size: ItemSize | `${ItemSize}` = ItemSize.MD;\n\n  @Input()\n  href: string;\n\n  @Input() rotateIcon: boolean = false;\n\n  @ContentChild(CheckboxComponent, { static: false, read: ElementRef })\n  private checkbox: ElementRef<HTMLElement>;\n  @ContentChild(RadioComponent, { static: false, read: ElementRef })\n  private radio: ElementRef<HTMLElement>;\n  @ContentChild(ToggleComponent, { static: false, read: ElementRef })\n  private toggle: ElementRef<HTMLElement>;\n  @ContentChild(ButtonComponent, { static: false, read: ElementRef })\n  private button: ElementRef<HTMLElement>;\n  @ViewChild(IonItem, { static: true, read: ElementRef })\n  private ionItem: ElementRef<HTMLIonItemElement>;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    private cdr: ChangeDetectorRef,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._linkAttributesToForward,\n      this.renderer,\n      this.ionItem.nativeElement\n    );\n    this.ionicElementPartHelper.setPart('item-inner', this.ionItem, '.item-inner');\n    this.ionicElementPartHelper.setPart('input-wrapper', this.ionItem, '.input-wrapper');\n  }\n\n  // Prevent default when inside kirby-dropdown to avoid blurring dropdown:\n  onMouseDown(event: MouseEvent) {\n    if (\n      event.currentTarget instanceof HTMLElement &&\n      event.currentTarget.closest('kirby-dropdown')\n    ) {\n      event.preventDefault();\n    }\n  }\n\n  get _renderButton(): boolean {\n    // We shouldn't render item as a button if the item contains\n    // nested interactive, i.e. checkbox, radio or toggle:\n\n    return this.selectable && !this.containsNestedInteractives;\n  }\n\n  get _renderLink(): string {\n    // We shouldn't render item as a link if the item contains\n    // nested interactive, i.e. checkbox, radio or toggle:\n    return this.containsNestedInteractives ? undefined : this.href;\n  }\n\n  @HostBinding('class.has-interactive')\n  private get containsNestedInteractives(): boolean {\n    return !!(this.checkbox || this.radio || this.toggle || this.button);\n  }\n}\n","<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { IonLabel } from '@ionic/angular';\n\n@Component({\n  selector: 'kirby-label',\n  templateUrl: './label.component.html',\n  styleUrls: ['./label.component.scss'],\n  imports: [IonLabel],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class LabelComponent {\n  @Input()\n  direction: 'vertical' | 'horizontal' = 'vertical';\n\n  @HostBinding('class.horizontal')\n  get _direction() {\n    return this.direction === 'horizontal';\n  }\n}\n","<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { IonItem, IonLabel, IonReorder } from '@ionic/angular';\nimport { ItemComponent } from './item.component';\nimport { LabelComponent } from './label/label.component';\n\nconst imports = [ItemComponent, LabelComponent];\n@NgModule({\n  imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, ...imports],\n  exports: [...imports],\n})\nexport class ItemModule {}\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAY;CAAZ,SAAY,UAAQ;CAClB,SAAA,QAAA;CACA,SAAA,QAAA;CACA,SAAA,QAAA;AACF,EAAA,CAJY,aAAA,WAAQ,CAAA,EAAA;AAcpB,IAAa,gBAAb,MAAa,cAAa;CAcxB,IAAI,aAAU;EACZ,OAAO,KAAK;CACd;CAEA,IAAa,WAAW,OAAc;EACpC,KAAK,cAAc;EACnB,KAAK,IAAI,aAAY;CACvB;CAwBA,YACU,YACA,UACA,KACA,wBAA8C;EAH9C,KAAA,aAAA;EACA,KAAA,WAAA;EACA,KAAA,MAAA;EACA,KAAA,yBAAA;EAhDF,KAAA,2BAA2B;GAAC;GAAO;GAAU;EAAU;EA0B/D,KAAA,OAAiC,SAAS;EAKjC,KAAA,aAAsB;CAkB5B;CAEH,kBAAe;EACb,kBACE,KAAK,WAAW,eAChB,KAAK,0BACL,KAAK,UACL,KAAK,QAAQ,aAAa;EAE5B,KAAK,uBAAuB,QAAQ,cAAc,KAAK,SAAS,aAAa;EAC7E,KAAK,uBAAuB,QAAQ,iBAAiB,KAAK,SAAS,gBAAgB;CACrF;CAGA,YAAY,OAAiB;EAC3B,IACE,MAAM,yBAAyB,eAC/B,MAAM,cAAc,QAAQ,gBAAgB,GAE5C,MAAM,eAAc;CAExB;CAEA,IAAI,gBAAa;EAIf,OAAO,KAAK,cAAc,CAAC,KAAK;CAClC;CAEA,IAAI,cAAW;EAGb,OAAO,KAAK,6BAA6B,SAAY,KAAK;CAC5D;CAEA,IACY,6BAA0B;EACpC,OAAO,CAAC,EAAE,KAAK,YAAY,KAAK,SAAS,KAAK,UAAU,KAAK;CAC/D;CAzFW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,MAAA;IAAA,EAAA,OAAA,GAAA,WAAA;IAAA,EAAA,OAAA,GAAA,UAAA;IAAA,EAAA,OAAA,GAAA,kBAAA;IAAA,EAAA,OAAA,GAAA,uBAAA;GAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAb;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAa,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,UAAA;IAAA,UAAA;IAAA,YAAA;IAAA,YAAA;IAAA,aAAA;IAAA,MAAA;IAAA,MAAA;IAAA,YAAA;GAAA;GAAA,MAAA,EAAA,YAAA;IAAA,kBAAA;IAAA,kBAAA;IAAA,oBAAA;IAAA,SAAA;IAAA,yBAAA;GAAA,EAAA;GAAA,WAHb,CAAC,sBAAsB;GAAC,SAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAqCrB;KAAiB,aAAA;KAAA,MAAyB;IAAU;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAEpD;KAAc,aAAA;KAAA,MAAyB;IAAU;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAEjD;KAAe,aAAA;KAAA,MAAyB;IAAU;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAElD;KAAe,aAAA;KAAA,MAAyB;IAAU;GAAA;GAAA,aAAA,CAAA;IAAA,cAAA;IAAA,OAAA;IAAA,WAErD;IAAO,aAAA;IAAA,MAAwB;IAAU,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UC9EtD;GA2BA,QAAA,CAAA,i5SAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDOY;KAAO,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;KAAU,UAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;KAAa,UAAA;KAAA,QAAA,CAAA,QAAA,MAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAEjC,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EARzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,iBAGL,wBAAwB;GAAM,WACpC,CAAC,sBAAsB;GAAC,SAC1B;IAAC;IAAS;IAAY;GAAa;GAAC,UAAA;GAAA,QAAA,CAAA,i5SAAA;EAAA,CAAA;;;;;;;;;;GAK5C,MAAA;GAAY,MAAA,CAAA,gBAAgB;EAC5B,GAAA,EAAA,MAAA,MAAA,CAAA;;GAEA,MAAA;GAAY,MAAA,CAAA,gBAAgB;EAC5B,GAAA,EAAA,MAAA,MAAA,CAAA;;GAEA,MAAA;GAAY,MAAA,CAAA,kBAAkB;EAC9B,GAAA,EAAA,MAAA,MAAA,CAAA;EAQA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAKA,aAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAEA,MAAA;GAAY,MAAA,CAAA,OAAO;EACnB,GAAA,EAAA,MAAA,MAAA,CAAA;EAGA,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAGA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAEA,MAAA;GAAa,MAAA,CAAA,mBAAmB;IAAE,QAAQ;IAAO,MAAM;GAAU,CAAE;;;GAEnE,MAAA;GAAa,MAAA,CAAA,gBAAgB;IAAE,QAAQ;IAAO,MAAM;GAAU,CAAE;;;GAEhE,MAAA;GAAa,MAAA,CAAA,iBAAiB;IAAE,QAAQ;IAAO,MAAM;GAAU,CAAE;;;GAEjE,MAAA;GAAa,MAAA,CAAA,iBAAiB;IAAE,QAAQ;IAAO,MAAM;GAAU,CAAE;;;GAEjE,MAAA;GAAU,MAAA,CAAA,SAAS;IAAE,QAAQ;IAAM,MAAM;GAAU,CAAE;;;GA4CrD,MAAA;GAAY,MAAA,CAAA,uBAAuB;;;;AEhHtC,IAAa,iBAAb,MAAa,eAAc;CAP3B,cAAA;EASE,KAAA,YAAuC;CAMxC;CAJC,IACI,aAAU;EACZ,OAAO,KAAK,cAAc;CAC5B;CAPW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAc,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAd;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAc,cAAA;GAAA,UAAA;GAAA,QAAA,EAAA,WAAA,YAAA;GAAA,MAAA,EAAA,YAAA,EAAA,oBAAA,kBAAA,EAAA;GAAA,UAAA;GAAA,UCV3B;GAGA,QAAA,CAAA,o7MAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MDIY;IAAQ,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA,CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAGP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAP1B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,SAGd,CAAC,QAAQ;GAAC,iBACF,wBAAwB;GAAK,UAAA;GAAA,QAAA,CAAA,o7MAAA;EAAA,CAAA;;;EAG7C,WAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAGA,MAAA;GAAY,MAAA,CAAA,kBAAkB;;;;AENjC,MAAM,UAAU,CAAC,eAAe,cAAc;AAK9C,IAAa,aAAb,MAAa,WAAU;CAAV;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAU,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAV;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAU,SAAA;IAHX;IAAY;IAAc;IAAS;IAAY;IAF1C;IAAe;GAAc;GAAA,SAAA,CAA7B,eAAe,cAAc;EAAA,CAAA;CAAA;CAKjC;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAU,SAAA;IAHX;IAAY;IAAc;IAAS;IAAY;IAAa;GAAO;EAAA,CAAA;CAAA;;AAGlE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAJtB,MAAA;EAAS,MAAA,CAAA;GACR,SAAS;IAAC;IAAY;IAAc;IAAS;IAAY;IAAU,GAAG;GAAO;GAC7E,SAAS,CAAC,GAAG,OAAO;EACrB,CAAA"}
+{"version":3,"file":"kirbydesign-designsystem-item.mjs","names":[],"sources":["../../item/src/item.component.ts","../../item/src/item.component.html","../../item/src/label/label.component.ts","../../item/src/label/label.component.html","../../item/src/item.module.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\n\nimport { CheckboxComponent } from '@kirbydesign/designsystem/checkbox';\nimport { RadioComponent } from '@kirbydesign/designsystem/radio';\nimport { ToggleComponent } from '@kirbydesign/designsystem/toggle';\nimport { IonItem, IonReorder } from '@ionic/angular';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\n\nexport enum ItemSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n}\n\n@Component({\n  selector: 'kirby-item',\n  templateUrl: './item.component.html',\n  styleUrls: ['./item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [IonicElementPartHelper],\n  imports: [IonItem, IonReorder, IconComponent],\n})\nexport class ItemComponent implements AfterViewInit {\n  private _linkAttributesToForward = ['rel', 'target', 'download'];\n\n  @HostBinding('class.disabled')\n  @Input()\n  disabled: boolean;\n  @HostBinding('class.selected')\n  @Input()\n  selected: boolean;\n  @HostBinding('class.disclosure')\n  @Input()\n  disclosure: 'link' | 'arrow-more' | 'arrow-down' | 'arrow-up' | null;\n\n  private _selectable: boolean;\n  get selectable(): boolean {\n    return this._selectable;\n  }\n\n  @Input() set selectable(value: boolean) {\n    this._selectable = value;\n    this.cdr.markForCheck();\n  }\n\n  @Input()\n  reorderable: boolean;\n  @HostBinding('class')\n  @Input()\n  size: ItemSize | `${ItemSize}` = ItemSize.MD;\n\n  @Input()\n  href: string;\n\n  @Input() rotateIcon: boolean = false;\n\n  @ContentChild(CheckboxComponent, { static: false, read: ElementRef })\n  private checkbox: ElementRef<HTMLElement>;\n  @ContentChild(RadioComponent, { static: false, read: ElementRef })\n  private radio: ElementRef<HTMLElement>;\n  @ContentChild(ToggleComponent, { static: false, read: ElementRef })\n  private toggle: ElementRef<HTMLElement>;\n  @ContentChild(ButtonComponent, { static: false, read: ElementRef })\n  private button: ElementRef<HTMLElement>;\n  @ViewChild(IonItem, { static: true, read: ElementRef })\n  private ionItem: ElementRef<HTMLIonItemElement>;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    private cdr: ChangeDetectorRef,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._linkAttributesToForward,\n      this.renderer,\n      this.ionItem.nativeElement\n    );\n    this.ionicElementPartHelper.setPart('item-inner', this.ionItem, '.item-inner');\n    this.ionicElementPartHelper.setPart('input-wrapper', this.ionItem, '.input-wrapper');\n  }\n\n  // Prevent default when inside kirby-dropdown to avoid blurring dropdown:\n  onMouseDown(event: MouseEvent) {\n    if (\n      event.currentTarget instanceof HTMLElement &&\n      event.currentTarget.closest('kirby-dropdown')\n    ) {\n      event.preventDefault();\n    }\n  }\n\n  get _renderButton(): boolean {\n    // We shouldn't render item as a button if the item contains\n    // nested interactive, i.e. checkbox, radio or toggle:\n\n    return this.selectable && !this.containsNestedInteractives;\n  }\n\n  get _renderLink(): string {\n    // We shouldn't render item as a link if the item contains\n    // nested interactive, i.e. checkbox, radio or toggle:\n    return this.containsNestedInteractives ? undefined : this.href;\n  }\n\n  @HostBinding('class.has-interactive')\n  private get containsNestedInteractives(): boolean {\n    return !!(this.checkbox || this.radio || this.toggle || this.button);\n  }\n}\n","<ion-item\n  lines=\"none\"\n  [disabled]=\"disabled\"\n  [button]=\"_renderButton\"\n  [href]=\"_renderLink\"\n  [detail]=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  @if (reorderable) {\n    <ion-reorder slot=\"end\">\n      <kirby-icon name=\"reorder\"></kirby-icon>\n    </ion-reorder>\n  }\n\n  @if (disclosure) {\n    <span class=\"disclosure\" slot=\"end\">\n      <kirby-icon\n        [class.rotate]=\"rotateIcon && (disclosure === 'arrow-down' || disclosure === 'arrow-up')\"\n        name=\"{{ disclosure }}\"\n      ></kirby-icon>\n    </span>\n  }\n</ion-item>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { IonLabel } from '@ionic/angular';\n\n@Component({\n  selector: 'kirby-label',\n  templateUrl: './label.component.html',\n  styleUrls: ['./label.component.scss'],\n  imports: [IonLabel],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class LabelComponent {\n  @Input()\n  direction: 'vertical' | 'horizontal' = 'vertical';\n\n  @HostBinding('class.horizontal')\n  get _direction() {\n    return this.direction === 'horizontal';\n  }\n}\n","<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { IonItem, IonLabel, IonReorder } from '@ionic/angular';\nimport { ItemComponent } from './item.component';\nimport { LabelComponent } from './label/label.component';\n\nconst imports = [ItemComponent, LabelComponent];\n@NgModule({\n  imports: [IconModule, CommonModule, IonItem, IonReorder, IonLabel, ...imports],\n  exports: [...imports],\n})\nexport class ItemModule {}\n"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-kirby-app.mjs

@@ -19,7 +19,7 @@ var AppComponent = class AppComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: AppComponent,
 			deps: [],
@@ -29,7 +29,7 @@ var AppComponent = class AppComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: AppComponent,
 			isStandalone: true,
 			selector: "kirby-app",
@@ -55,7 +55,7 @@ var AppComponent = class AppComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: AppComponent,
 	decorators: [{
@@ -80,7 +80,7 @@ var KirbyAppModule = class KirbyAppModule {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: KirbyAppModule,
 			deps: [],
@@ -90,7 +90,7 @@ var KirbyAppModule = class KirbyAppModule {
 	static {
 		this.ɵmod = i0.ɵɵngDeclareNgModule({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: KirbyAppModule,
 			imports: [
@@ -104,7 +104,7 @@ var KirbyAppModule = class KirbyAppModule {
 	static {
 		this.ɵinj = i0.ɵɵngDeclareInjector({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: KirbyAppModule,
 			imports: [
@@ -117,7 +117,7 @@ var KirbyAppModule = class KirbyAppModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: KirbyAppModule,
 	decorators: [{