@kirbydesign/designsystem 11.9.0 → 11.10.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.
- package/fesm2022/kirbydesign-designsystem-config.mjs +2 -0
- package/fesm2022/kirbydesign-designsystem-config.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-gesture.mjs +24 -0
- package/fesm2022/kirbydesign-designsystem-gesture.mjs.map +1 -0
- package/fesm2022/kirbydesign-designsystem-item.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-list.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-modal.mjs +11 -4
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/gesture/package.json +4 -0
- package/package.json +6 -2
- package/types/kirbydesign-designsystem-config.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-gesture.d.ts +50 -0
- package/types/kirbydesign-designsystem-gesture.d.ts.map +1 -0
- package/types/kirbydesign-designsystem-modal.d.ts +1 -0
- package/types/kirbydesign-designsystem-modal.d.ts.map +1 -1
|
@@ -60,11 +60,11 @@ class ItemComponent {
|
|
|
60
60
|
return !!(this.checkbox || this.radio || this.toggle || this.button);
|
|
61
61
|
}
|
|
62
62
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
63
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ItemComponent, isStandalone: true, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", disclosure: "disclosure", selectable: "selectable", reorderable: "reorderable", size: "size", href: "href", rotateIcon: "rotateIcon" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected", "class.disclosure": "this.disclosure", "class": "this.size", "class.has-interactive": "this.containsNestedInteractives" } }, providers: [IonicElementPartHelper], queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, read: ElementRef }, { propertyName: "radio", first: true, predicate: RadioComponent, descendants: true, read: ElementRef }, { propertyName: "toggle", first: true, predicate: ToggleComponent, descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "ionItem", first: true, predicate: IonItem, descendants: true, read: ElementRef, static: true }], 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: 4px;--inner-padding-bottom: 4px}:host .outside{--kirby-badge-font-size: 10px;display:flex;width:1rem;margin:0;position:absolute;left:4px;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:0 0 0 2px #238cec inset,0 0 0 4px var(--kirby-white) inset}@media(hover:hover){ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-item:active,ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:clamp(13px,1rem,32px)}@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:12px}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:16px}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-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:clamp(12px,.875rem,28px);line-height:1.4286}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:clamp(13px,1rem,32px);line-height:1.5;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{font-size:clamp(11px,.75rem,24px);line-height:1.3334}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}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-interactive) ion-item ::ng-deep>.kirby-item-title{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-interactive) ion-item:has([slot=start]:not(.outside)),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)){--item-padding-top: 8px;--inner-padding-top: 0;--inner-padding-end: 32px}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) ::ng-deep>[slot=end],ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)) ::ng-deep>[slot=end]{margin-inline-start:initial}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(item-inner),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(item-inner){position:initial;gap:12px}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(input-wrapper),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(input-wrapper){justify-content:center}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(native),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(native){flex-direction:column;align-items:flex-start}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .disclosure,ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)) .disclosure{position:absolute;right:8px;top:calc(var(--item-padding-top) + .5lh - 12px);font-size:clamp(13px,1rem,32px);line-height:1.5}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .outside{top:calc(var(--item-padding-top) + 2px + 16px)}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .disclosure{top:calc(var(--item-padding-top) + 2px + 8px)}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:not(:has([slot=start]:not(.outside))):has([slot=end]:not(.disclosure)) .outside{align-items:start;top:calc(var(--item-padding-top) + .5lh - 2px)}}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:16px;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: 24px;padding-left:4px;color:var(--kirby-semi-dark);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform .2s}.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(.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:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(kirby-card-header) ion-item{--background: transparent}\n"], dependencies: [{ kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
63
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ItemComponent, isStandalone: true, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", disclosure: "disclosure", selectable: "selectable", reorderable: "reorderable", size: "size", href: "href", rotateIcon: "rotateIcon" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected", "class.disclosure": "this.disclosure", "class": "this.size", "class.has-interactive": "this.containsNestedInteractives" } }, providers: [IonicElementPartHelper], queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, read: ElementRef }, { propertyName: "radio", first: true, predicate: RadioComponent, descendants: true, read: ElementRef }, { propertyName: "toggle", first: true, predicate: ToggleComponent, descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "ionItem", first: true, predicate: IonItem, descendants: true, read: ElementRef, static: true }], 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: 4px;--inner-padding-bottom: 4px}:host .outside{--kirby-badge-font-size: 10px;display:flex;width:1rem;margin:0;position:absolute;left:4px;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:0 0 0 2px #238cec inset,0 0 0 4px var(--kirby-white) inset}@media(hover:hover){ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-item:active,ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:clamp(13px,1rem,32px)}@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:12px}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:16px}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-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:clamp(12px,.875rem,28px);line-height:1.4286}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:clamp(13px,1rem,32px);line-height:1.5;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:clamp(11px,.75rem,24px);line-height:1.3334}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{color:var(--kirby-text-color-semi-dark)}ion-item ::ng-deep>.kirby-item-disclosure{display:flex;align-items:center}ion-item .kirby-item-disclosure kirby-icon{color:var(--kirby-semi-dark);margin-inline-end:calc(var(--kirby-spacing-xxs) * -1)}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-interactive) 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-interactive) ion-item:has([slot=start]:not(.outside)),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)){--item-padding-top: 8px;--inner-padding-top: 0;--inner-padding-end: 32px}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) ::ng-deep>[slot=end],ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)) ::ng-deep>[slot=end]{margin-inline-start:initial}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(item-inner),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(item-inner){position:initial;gap:12px}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(input-wrapper),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(input-wrapper){justify-content:center}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(native),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(native){flex-direction:column;align-items:flex-start}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .disclosure,ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)) .disclosure{position:absolute;right:8px;top:calc(var(--item-padding-top) + .5lh - 12px);font-size:clamp(13px,1rem,32px);line-height:1.5}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .outside{top:calc(var(--item-padding-top) + 2px + 16px)}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .disclosure{top:calc(var(--item-padding-top) + 2px + 8px)}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:not(:has([slot=start]:not(.outside))):has([slot=end]:not(.disclosure)) .outside{align-items:start;top:calc(var(--item-padding-top) + .5lh - 2px)}}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:16px;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: 24px;padding-left:4px;color:var(--kirby-semi-dark);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform .2s}.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(.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:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(kirby-card-header) ion-item{--background: transparent}\n"], dependencies: [{ kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
64
64
|
}
|
|
65
65
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ItemComponent, decorators: [{
|
|
66
66
|
type: Component,
|
|
67
|
-
args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], imports: [IonItem, IonReorder, 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: 4px;--inner-padding-bottom: 4px}:host .outside{--kirby-badge-font-size: 10px;display:flex;width:1rem;margin:0;position:absolute;left:4px;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:0 0 0 2px #238cec inset,0 0 0 4px var(--kirby-white) inset}@media(hover:hover){ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-item:active,ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:clamp(13px,1rem,32px)}@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:12px}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:16px}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-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:clamp(12px,.875rem,28px);line-height:1.4286}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:clamp(13px,1rem,32px);line-height:1.5;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{font-size:clamp(11px,.75rem,24px);line-height:1.3334}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail{color:var(--kirby-text-color-semi-dark)}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-interactive) ion-item ::ng-deep>.kirby-item-title{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-interactive) ion-item:has([slot=start]:not(.outside)),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)){--item-padding-top: 8px;--inner-padding-top: 0;--inner-padding-end: 32px}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) ::ng-deep>[slot=end],ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)) ::ng-deep>[slot=end]{margin-inline-start:initial}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(item-inner),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(item-inner){position:initial;gap:12px}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(input-wrapper),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(input-wrapper){justify-content:center}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(native),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(native){flex-direction:column;align-items:flex-start}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .disclosure,ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)) .disclosure{position:absolute;right:8px;top:calc(var(--item-padding-top) + .5lh - 12px);font-size:clamp(13px,1rem,32px);line-height:1.5}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .outside{top:calc(var(--item-padding-top) + 2px + 16px)}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .disclosure{top:calc(var(--item-padding-top) + 2px + 8px)}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:not(:has([slot=start]:not(.outside))):has([slot=end]:not(.disclosure)) .outside{align-items:start;top:calc(var(--item-padding-top) + .5lh - 2px)}}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:16px;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: 24px;padding-left:4px;color:var(--kirby-semi-dark);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform .2s}.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(.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:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(kirby-card-header) ion-item{--background: transparent}\n"] }]
|
|
67
|
+
args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], imports: [IonItem, IonReorder, 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: 4px;--inner-padding-bottom: 4px}:host .outside{--kirby-badge-font-size: 10px;display:flex;width:1rem;margin:0;position:absolute;left:4px;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:0 0 0 2px #238cec inset,0 0 0 4px var(--kirby-white) inset}@media(hover:hover){ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-item:active,ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:clamp(13px,1rem,32px)}@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:12px}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:16px}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-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ion-item ::ng-deep>:where(p){font-size:clamp(12px,.875rem,28px);line-height:1.4286}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:clamp(13px,1rem,32px);line-height:1.5;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:clamp(11px,.75rem,24px);line-height:1.3334}ion-item ::ng-deep>[subtitle]:not(:last-child),ion-item ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}ion-item ::ng-deep>[detail],ion-item ::ng-deep>.kirby-item-detail,ion-item ::ng-deep>.kirby-item-disclosure{color:var(--kirby-text-color-semi-dark)}ion-item ::ng-deep>.kirby-item-disclosure{display:flex;align-items:center}ion-item .kirby-item-disclosure kirby-icon{color:var(--kirby-semi-dark);margin-inline-end:calc(var(--kirby-spacing-xxs) * -1)}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-interactive) 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-interactive) ion-item:has([slot=start]:not(.outside)),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)){--item-padding-top: 8px;--inner-padding-top: 0;--inner-padding-end: 32px}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) ::ng-deep>[slot=end],ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)) ::ng-deep>[slot=end]{margin-inline-start:initial}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(item-inner),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(item-inner){position:initial;gap:12px}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(input-wrapper),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(input-wrapper){justify-content:center}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside))::part(native),ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure))::part(native){flex-direction:column;align-items:flex-start}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .disclosure,ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=end]:not(.disclosure)) .disclosure{position:absolute;right:8px;top:calc(var(--item-padding-top) + .5lh - 12px);font-size:clamp(13px,1rem,32px);line-height:1.5}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .outside{top:calc(var(--item-padding-top) + 2px + 16px)}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:has([slot=start]:not(.outside)) .disclosure{top:calc(var(--item-padding-top) + 2px + 8px)}ion-item :host-context(.kirby-trt):not(.has-interactive) ion-item:not(:has([slot=start]:not(.outside))):has([slot=end]:not(.disclosure)) .outside{align-items:start;top:calc(var(--item-padding-top) + .5lh - 2px)}}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:16px;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: 24px;padding-left:4px;color:var(--kirby-semi-dark);display:inline-flex;justify-content:center;align-items:center}.disclosure kirby-icon{transition:transform .2s}.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(.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:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(kirby-card-header) ion-item{--background: transparent}\n"] }]
|
|
68
68
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.IonicElementPartHelper }], propDecorators: { disabled: [{
|
|
69
69
|
type: HostBinding,
|
|
70
70
|
args: ['class.disabled']
|
|
@@ -121,11 +121,11 @@ class LabelComponent {
|
|
|
121
121
|
return this.direction === 'horizontal';
|
|
122
122
|
}
|
|
123
123
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
124
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: LabelComponent, isStandalone: true, selector: "kirby-label", inputs: { direction: "direction" }, host: { properties: { "class.horizontal": "this._direction" } }, ngImport: i0, template: "<ion-label>\n <ng-content></ng-content>\n</ion-label>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:
|
|
124
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: LabelComponent, isStandalone: true, selector: "kirby-label", inputs: { direction: "direction" }, host: { properties: { "class.horizontal": "this._direction" } }, ngImport: i0, template: "<ion-label>\n <ng-content></ng-content>\n</ion-label>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline}:host.horizontal ion-label ::ng-deep>:last-child{white-space:normal;overflow:visible;text-overflow:initial}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h1,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h2,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h3,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h4,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h5,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h6,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>data,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(p){font-size:clamp(12px,.875rem,28px);line-height:1.4286}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(.kirby-item-title),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h1),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h2),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h3),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h4),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h5),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h6),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(data){font-size:clamp(13px,1rem,32px);line-height:1.5;font-weight:400}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-disclosure{font-size:clamp(11px,.75rem,24px);line-height:1.3334}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle]:not(:last-child),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-disclosure{color:var(--kirby-text-color-semi-dark)}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-disclosure{display:flex;align-items:center}:host-context(kirby-item) ::ng-deep ion-label .kirby-item-disclosure kirby-icon{color:var(--kirby-semi-dark);margin-inline-end:calc(var(--kirby-spacing-xxs) * -1)}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[wrap],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-wrap{white-space:normal}:host-context(kirby-section-header) ion-label{--padding-end: 16px;--padding-start: 16px}:host-context(kirby-section-header) ion-label ::ng-deep>[heading]{font-weight:700;font-size:clamp(14px,1.125rem,35px);line-height:1.3334;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>h2[heading],:host-context(kirby-section-header) ion-label ::ng-deep>.kirby-text-large[heading]{font-size:clamp(19px,1.375rem,38px);line-height:1.2727}:host-context(kirby-section-header) ion-label ::ng-deep>.kirby-text-medium[heading]{font-size:clamp(14px,1.125rem,35px);line-height:1.3334}:host-context(kirby-section-header) ion-label ::ng-deep>h4[heading],:host-context(kirby-section-header) ion-label ::ng-deep>h5[heading],:host-context(kirby-section-header) ion-label ::ng-deep>h6[heading],:host-context(kirby-section-header) ion-label ::ng-deep>.kirby-text-normal[heading]{font-size:clamp(13px,1rem,32px);line-height:1.5}:host-context(kirby-section-header) ion-label ::ng-deep>[detail],:host-context(kirby-section-header) ion-label ::ng-deep>[label]{font-weight:300;font-size:clamp(12px,.875rem,28px);line-height:1.4286;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[wrap]{white-space:normal}:host([slot=end]) ion-label ::ng-deep>data,:host([slot=end]) ion-label ::ng-deep>[detail]{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]):not(.kirby-item-detail),:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]):not(.kirby-item-detail){font-weight:700}@media(max-width:767px){:host-context(.kirby-trt):not(.has-interactive) :host([slot=end]) ion-label ::ng-deep>*{margin-inline-start:0;text-align:start}:host-context(.kirby-trt):not(.has-interactive) ion-label{flex-direction:column;align-items:flex-start}:host-context(.kirby-trt):not(.has-interactive) ion-label ::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}:host-context(.kirby-trt):not(.has-interactive) ion-label ::ng-deep>[subtitle],:host-context(.kirby-trt):not(.has-interactive) ion-label ::ng-deep>.kirby-item-subtitle:not(.kirby-item-wrap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:initial;text-overflow:ellipsis}:host-context(.kirby-trt):not(.has-interactive) ion-label ::ng-deep>.kirby-item-detail:not(.kirby-item-wrap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host-context(.kirby-trt):not(.has-interactive) ion-label ::ng-deep>.kirby-item-disclosure{position:absolute;top:var(--padding-top, 0);right:16px;margin-left:0}}\n"], dependencies: [{ kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
|
|
125
125
|
}
|
|
126
126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LabelComponent, decorators: [{
|
|
127
127
|
type: Component,
|
|
128
|
-
args: [{ selector: 'kirby-label', imports: [IonLabel], template: "<ion-label>\n <ng-content></ng-content>\n</ion-label>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:
|
|
128
|
+
args: [{ selector: 'kirby-label', imports: [IonLabel], template: "<ion-label>\n <ng-content></ng-content>\n</ion-label>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline}:host.horizontal ion-label ::ng-deep>:last-child{white-space:normal;overflow:visible;text-overflow:initial}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h1,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h2,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h3,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h4,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h5,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>h6,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>data,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>p{color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(p){font-size:clamp(12px,.875rem,28px);line-height:1.4286}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(.kirby-item-title),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h1),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h2),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h3),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h4),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h5),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(h6),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>:where(data){font-size:clamp(13px,1rem,32px);line-height:1.5;font-weight:400}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-disclosure{font-size:clamp(11px,.75rem,24px);line-height:1.3334}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[subtitle]:not(:last-child),:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-subtitle:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[detail],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-detail,:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-disclosure{color:var(--kirby-text-color-semi-dark)}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-disclosure{display:flex;align-items:center}:host-context(kirby-item) ::ng-deep ion-label .kirby-item-disclosure kirby-icon{color:var(--kirby-semi-dark);margin-inline-end:calc(var(--kirby-spacing-xxs) * -1)}:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>[wrap],:host-context(kirby-item) ::ng-deep ion-label ::ng-deep>.kirby-item-wrap{white-space:normal}:host-context(kirby-section-header) ion-label{--padding-end: 16px;--padding-start: 16px}:host-context(kirby-section-header) ion-label ::ng-deep>[heading]{font-weight:700;font-size:clamp(14px,1.125rem,35px);line-height:1.3334;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>h2[heading],:host-context(kirby-section-header) ion-label ::ng-deep>.kirby-text-large[heading]{font-size:clamp(19px,1.375rem,38px);line-height:1.2727}:host-context(kirby-section-header) ion-label ::ng-deep>.kirby-text-medium[heading]{font-size:clamp(14px,1.125rem,35px);line-height:1.3334}:host-context(kirby-section-header) ion-label ::ng-deep>h4[heading],:host-context(kirby-section-header) ion-label ::ng-deep>h5[heading],:host-context(kirby-section-header) ion-label ::ng-deep>h6[heading],:host-context(kirby-section-header) ion-label ::ng-deep>.kirby-text-normal[heading]{font-size:clamp(13px,1rem,32px);line-height:1.5}:host-context(kirby-section-header) ion-label ::ng-deep>[detail],:host-context(kirby-section-header) ion-label ::ng-deep>[label]{font-weight:300;font-size:clamp(12px,.875rem,28px);line-height:1.4286;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[wrap]{white-space:normal}:host([slot=end]) ion-label ::ng-deep>data,:host([slot=end]) ion-label ::ng-deep>[detail]{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]):not(.kirby-item-detail),:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]):not(.kirby-item-detail){font-weight:700}@media(max-width:767px){:host-context(.kirby-trt):not(.has-interactive) :host([slot=end]) ion-label ::ng-deep>*{margin-inline-start:0;text-align:start}:host-context(.kirby-trt):not(.has-interactive) ion-label{flex-direction:column;align-items:flex-start}:host-context(.kirby-trt):not(.has-interactive) ion-label ::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}:host-context(.kirby-trt):not(.has-interactive) ion-label ::ng-deep>[subtitle],:host-context(.kirby-trt):not(.has-interactive) ion-label ::ng-deep>.kirby-item-subtitle:not(.kirby-item-wrap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:initial;text-overflow:ellipsis}:host-context(.kirby-trt):not(.has-interactive) ion-label ::ng-deep>.kirby-item-detail:not(.kirby-item-wrap){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}:host-context(.kirby-trt):not(.has-interactive) ion-label ::ng-deep>.kirby-item-disclosure{position:absolute;top:var(--padding-top, 0);right:16px;margin-left:0}}\n"] }]
|
|
129
129
|
}], propDecorators: { direction: [{
|
|
130
130
|
type: Input
|
|
131
131
|
}], _direction: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-item.mjs","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","../../item/src/kirbydesign-designsystem-item.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/standalone';\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 { Component, HostBinding, Input } from '@angular/core';\nimport { IonLabel } from '@ionic/angular/standalone';\n\n@Component({\n selector: 'kirby-label',\n templateUrl: './label.component.html',\n styleUrls: ['./label.component.scss'],\n imports: [IonLabel],\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/standalone';\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-item.mjs","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","../../item/src/kirbydesign-designsystem-item.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/standalone';\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 { Component, HostBinding, Input } from '@angular/core';\nimport { IonLabel } from '@ionic/angular/standalone';\n\n@Component({\n selector: 'kirby-label',\n templateUrl: './label.component.html',\n styleUrls: ['./label.component.scss'],\n imports: [IonLabel],\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/standalone';\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -346,7 +346,7 @@ class ListItemComponent {
|
|
|
346
346
|
}
|
|
347
347
|
}
|
|
348
348
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ListItemComponent, deps: [{ token: i1$1.PlatformService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
349
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ListItemComponent, isStandalone: true, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n @if (_hasSwipeActions(item)) {\n <ion-item-options [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n @for (swipeAction of _getSwipeActions(item); track swipeAction.title) {\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n @if (_getSwipeActionIcon(swipeAction, item)) {\n <kirby-icon size=\"sm\" [name]=\"_getSwipeActionIcon(swipeAction, item)\"></kirby-icon>\n }\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n }\n </div>\n </ion-item-options>\n }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}:host(:not(kirby-list-item)){--kirby-list-border-top-radius: var( --kirby-content-border-top-radius, var(--kirby-border-radius-n) );--kirby-list-border-bottom-radius: var( --kirby-content-border-bottom-radius, var(--kirby-border-radius-n) )}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:clamp(12px,.875rem,28px);min-height:56px;overflow:visible;width:100%}ion-item-sliding{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:var(--kirby-border-radius-n)}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:var(--kirby-list-border-top-radius) var(--kirby-list-border-top-radius) var(--kirby-list-border-bottom-radius) var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-list-header{border-top-left-radius:var(--kirby-list-border-top-radius);border-top-right-radius:var(--kirby-list-border-top-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) .footer{border-bottom-left-radius:var(--kirby-list-border-bottom-radius);border-bottom-right-radius:var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}kirby-list-item{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}kirby-list-item:first-of-type{--kirby-content-border-top-radius: var(--kirby-list-border-top-radius)}kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: var(--kirby-list-border-bottom-radius)}.has-header kirby-list-item:first-of-type{--kirby-content-border-top-radius: 0}.has-footer kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: 0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset;--kirby-item-background: transparent;--kirby-list-item-border-color: var(--kirby-medium)}:host-context(kirby-card){--kirby-list-item-border-color: var(--kirby-background-color)}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-list-item-border-color, var(--kirby-background-color))}\n"], dependencies: [{ kind: "component", type: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "directive", type: ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
|
|
349
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ListItemComponent, isStandalone: true, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n @if (_hasSwipeActions(item)) {\n <ion-item-options [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n @for (swipeAction of _getSwipeActions(item); track swipeAction.title) {\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n @if (_getSwipeActionIcon(swipeAction, item)) {\n <kirby-icon size=\"sm\" [name]=\"_getSwipeActionIcon(swipeAction, item)\"></kirby-icon>\n }\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n }\n </div>\n </ion-item-options>\n }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}:host(:not(kirby-list-item)){--kirby-list-border-top-radius: var( --kirby-content-border-top-radius, var(--kirby-border-radius-n) );--kirby-list-border-bottom-radius: var( --kirby-content-border-bottom-radius, var(--kirby-border-radius-n) )}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:clamp(12px,.875rem,28px);min-height:56px;overflow:visible;width:100%}ion-item-sliding{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:var(--kirby-border-radius-n)}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:var(--kirby-list-border-top-radius) var(--kirby-list-border-top-radius) var(--kirby-list-border-bottom-radius) var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-list-header{border-top-left-radius:var(--kirby-list-border-top-radius);border-top-right-radius:var(--kirby-list-border-top-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) .footer{border-bottom-left-radius:var(--kirby-list-border-bottom-radius);border-bottom-right-radius:var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}kirby-list-item{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}kirby-list-item:first-of-type{--kirby-content-border-top-radius: var(--kirby-list-border-top-radius)}kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: var(--kirby-list-border-bottom-radius)}.has-header kirby-list-item:first-of-type{--kirby-content-border-top-radius: 0}.has-footer kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: 0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset;--kirby-item-background: transparent;--kirby-list-item-border-color: var(--kirby-medium)}:host-context(kirby-card){--kirby-list-item-border-color: var(--kirby-background-color)}:host-context(kirby-card.outlined){--kirby-list-item-border-color: var(--kirby-medium)}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-list-item-border-color, var(--kirby-background-color))}\n"], dependencies: [{ kind: "component", type: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "directive", type: ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
|
|
350
350
|
}
|
|
351
351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
352
352
|
type: Component,
|
|
@@ -358,7 +358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
358
358
|
IonItemOptions,
|
|
359
359
|
IconComponent,
|
|
360
360
|
IonLabel,
|
|
361
|
-
], template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n @if (_hasSwipeActions(item)) {\n <ion-item-options [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n @for (swipeAction of _getSwipeActions(item); track swipeAction.title) {\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n @if (_getSwipeActionIcon(swipeAction, item)) {\n <kirby-icon size=\"sm\" [name]=\"_getSwipeActionIcon(swipeAction, item)\"></kirby-icon>\n }\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n }\n </div>\n </ion-item-options>\n }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}:host(:not(kirby-list-item)){--kirby-list-border-top-radius: var( --kirby-content-border-top-radius, var(--kirby-border-radius-n) );--kirby-list-border-bottom-radius: var( --kirby-content-border-bottom-radius, var(--kirby-border-radius-n) )}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:clamp(12px,.875rem,28px);min-height:56px;overflow:visible;width:100%}ion-item-sliding{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:var(--kirby-border-radius-n)}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:var(--kirby-list-border-top-radius) var(--kirby-list-border-top-radius) var(--kirby-list-border-bottom-radius) var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-list-header{border-top-left-radius:var(--kirby-list-border-top-radius);border-top-right-radius:var(--kirby-list-border-top-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) .footer{border-bottom-left-radius:var(--kirby-list-border-bottom-radius);border-bottom-right-radius:var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}kirby-list-item{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}kirby-list-item:first-of-type{--kirby-content-border-top-radius: var(--kirby-list-border-top-radius)}kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: var(--kirby-list-border-bottom-radius)}.has-header kirby-list-item:first-of-type{--kirby-content-border-top-radius: 0}.has-footer kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: 0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset;--kirby-item-background: transparent;--kirby-list-item-border-color: var(--kirby-medium)}:host-context(kirby-card){--kirby-list-item-border-color: var(--kirby-background-color)}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-list-item-border-color, var(--kirby-background-color))}\n"] }]
|
|
361
|
+
], template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n @if (_hasSwipeActions(item)) {\n <ion-item-options [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n @for (swipeAction of _getSwipeActions(item); track swipeAction.title) {\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n @if (_getSwipeActionIcon(swipeAction, item)) {\n <kirby-icon size=\"sm\" [name]=\"_getSwipeActionIcon(swipeAction, item)\"></kirby-icon>\n }\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n }\n </div>\n </ion-item-options>\n }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}:host(:not(kirby-list-item)){--kirby-list-border-top-radius: var( --kirby-content-border-top-radius, var(--kirby-border-radius-n) );--kirby-list-border-bottom-radius: var( --kirby-content-border-bottom-radius, var(--kirby-border-radius-n) )}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:clamp(12px,.875rem,28px);min-height:56px;overflow:visible;width:100%}ion-item-sliding{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:var(--kirby-border-radius-n)}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:var(--kirby-list-border-top-radius) var(--kirby-list-border-top-radius) var(--kirby-list-border-bottom-radius) var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-list-header{border-top-left-radius:var(--kirby-list-border-top-radius);border-top-right-radius:var(--kirby-list-border-top-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) .footer{border-bottom-left-radius:var(--kirby-list-border-bottom-radius);border-bottom-right-radius:var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}kirby-list-item{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}kirby-list-item:first-of-type{--kirby-content-border-top-radius: var(--kirby-list-border-top-radius)}kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: var(--kirby-list-border-bottom-radius)}.has-header kirby-list-item:first-of-type{--kirby-content-border-top-radius: 0}.has-footer kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: 0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset;--kirby-item-background: transparent;--kirby-list-item-border-color: var(--kirby-medium)}:host-context(kirby-card){--kirby-list-item-border-color: var(--kirby-background-color)}:host-context(kirby-card.outlined){--kirby-list-item-border-color: var(--kirby-medium)}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-list-item-border-color, var(--kirby-background-color))}\n"] }]
|
|
362
362
|
}], ctorParameters: () => [{ type: i1$1.PlatformService }], propDecorators: { ionItemSliding: [{
|
|
363
363
|
type: ViewChild,
|
|
364
364
|
args: [IonItemSliding]
|
|
@@ -533,7 +533,7 @@ class ListComponent {
|
|
|
533
533
|
return this._isStandAloneEnabled ? `stand-alone-bottom-margin-${this.standAloneSpacing}` : '';
|
|
534
534
|
}
|
|
535
535
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ListComponent, deps: [{ token: ListHelper }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
536
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ListComponent, isStandalone: true, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n @if (headerTemplate) {\n <ion-list-header>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n @if (footerTemplate) {\n <div class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n }\n</ion-list>\n\n@if (!isLoadOnDemandEnabled && noMoreItemsText) {\n <p class=\"no-more-items\">\n {{ noMoreItemsText }}\n </p>\n}\n@if (_isLoading) {\n <div class=\"loading\">\n <kirby-spinner></kirby-spinner>\n </div>\n}\n\n<ng-template #groupedListTemplate>\n @for (section of _groupedItems; track sectionTrackBy($index, section)) {\n <ion-item-group [ngClass]=\"standAloneClass()\">\n @if (_isSectionsEnabled) {\n <ion-item-divider>\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n }\n @if (_isSectionsEnabled && _isStandAloneEnabled) {\n @for (list of section.lists; track list) {\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n }\n } @else {\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n }\n </ion-item-group>\n }\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n @for (item of items; track trackBy ? trackBy($index, item) : $index; let i = $index) {\n <kirby-list-item\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n ></kirby-list-item>\n }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}:host(:not(kirby-list-item)){--kirby-list-border-top-radius: var( --kirby-content-border-top-radius, var(--kirby-border-radius-n) );--kirby-list-border-bottom-radius: var( --kirby-content-border-bottom-radius, var(--kirby-border-radius-n) )}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:clamp(12px,.875rem,28px);min-height:56px;overflow:visible;width:100%}ion-item-sliding{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:var(--kirby-border-radius-n)}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:var(--kirby-list-border-top-radius) var(--kirby-list-border-top-radius) var(--kirby-list-border-bottom-radius) var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-list-header{border-top-left-radius:var(--kirby-list-border-top-radius);border-top-right-radius:var(--kirby-list-border-top-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) .footer{border-bottom-left-radius:var(--kirby-list-border-bottom-radius);border-bottom-right-radius:var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}kirby-list-item{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}kirby-list-item:first-of-type{--kirby-content-border-top-radius: var(--kirby-list-border-top-radius)}kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: var(--kirby-list-border-bottom-radius)}.has-header kirby-list-item:first-of-type{--kirby-content-border-top-radius: 0}.has-footer kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: 0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset;--kirby-item-background: transparent;--kirby-list-item-border-color: var(--kirby-medium)}:host-context(kirby-card){--kirby-list-item-border-color: var(--kirby-background-color)}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "kirby-spinner" }, { kind: "component", type: IonItemGroup, selector: "ion-item-group" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }] }); }
|
|
536
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ListComponent, isStandalone: true, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n @if (headerTemplate) {\n <ion-list-header>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n @if (footerTemplate) {\n <div class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n }\n</ion-list>\n\n@if (!isLoadOnDemandEnabled && noMoreItemsText) {\n <p class=\"no-more-items\">\n {{ noMoreItemsText }}\n </p>\n}\n@if (_isLoading) {\n <div class=\"loading\">\n <kirby-spinner></kirby-spinner>\n </div>\n}\n\n<ng-template #groupedListTemplate>\n @for (section of _groupedItems; track sectionTrackBy($index, section)) {\n <ion-item-group [ngClass]=\"standAloneClass()\">\n @if (_isSectionsEnabled) {\n <ion-item-divider>\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n }\n @if (_isSectionsEnabled && _isStandAloneEnabled) {\n @for (list of section.lists; track list) {\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n }\n } @else {\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n }\n </ion-item-group>\n }\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n @for (item of items; track trackBy ? trackBy($index, item) : $index; let i = $index) {\n <kirby-list-item\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n ></kirby-list-item>\n }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}:host(:not(kirby-list-item)){--kirby-list-border-top-radius: var( --kirby-content-border-top-radius, var(--kirby-border-radius-n) );--kirby-list-border-bottom-radius: var( --kirby-content-border-bottom-radius, var(--kirby-border-radius-n) )}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:clamp(12px,.875rem,28px);min-height:56px;overflow:visible;width:100%}ion-item-sliding{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:var(--kirby-border-radius-n)}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:var(--kirby-list-border-top-radius) var(--kirby-list-border-top-radius) var(--kirby-list-border-bottom-radius) var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-list-header{border-top-left-radius:var(--kirby-list-border-top-radius);border-top-right-radius:var(--kirby-list-border-top-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) .footer{border-bottom-left-radius:var(--kirby-list-border-bottom-radius);border-bottom-right-radius:var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}kirby-list-item{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}kirby-list-item:first-of-type{--kirby-content-border-top-radius: var(--kirby-list-border-top-radius)}kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: var(--kirby-list-border-bottom-radius)}.has-header kirby-list-item:first-of-type{--kirby-content-border-top-radius: 0}.has-footer kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: 0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset;--kirby-item-background: transparent;--kirby-list-item-border-color: var(--kirby-medium)}:host-context(kirby-card){--kirby-list-item-border-color: var(--kirby-background-color)}:host-context(kirby-card.outlined){--kirby-list-item-border-color: var(--kirby-medium)}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "kirby-spinner" }, { kind: "component", type: IonItemGroup, selector: "ion-item-group" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }] }); }
|
|
537
537
|
}
|
|
538
538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ListComponent, decorators: [{
|
|
539
539
|
type: Component,
|
|
@@ -547,7 +547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
547
547
|
NgClass,
|
|
548
548
|
IonItemDivider,
|
|
549
549
|
ListItemComponent,
|
|
550
|
-
], template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n @if (headerTemplate) {\n <ion-list-header>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n @if (footerTemplate) {\n <div class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n }\n</ion-list>\n\n@if (!isLoadOnDemandEnabled && noMoreItemsText) {\n <p class=\"no-more-items\">\n {{ noMoreItemsText }}\n </p>\n}\n@if (_isLoading) {\n <div class=\"loading\">\n <kirby-spinner></kirby-spinner>\n </div>\n}\n\n<ng-template #groupedListTemplate>\n @for (section of _groupedItems; track sectionTrackBy($index, section)) {\n <ion-item-group [ngClass]=\"standAloneClass()\">\n @if (_isSectionsEnabled) {\n <ion-item-divider>\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n }\n @if (_isSectionsEnabled && _isStandAloneEnabled) {\n @for (list of section.lists; track list) {\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n }\n } @else {\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n }\n </ion-item-group>\n }\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n @for (item of items; track trackBy ? trackBy($index, item) : $index; let i = $index) {\n <kirby-list-item\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n ></kirby-list-item>\n }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}:host(:not(kirby-list-item)){--kirby-list-border-top-radius: var( --kirby-content-border-top-radius, var(--kirby-border-radius-n) );--kirby-list-border-bottom-radius: var( --kirby-content-border-bottom-radius, var(--kirby-border-radius-n) )}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:clamp(12px,.875rem,28px);min-height:56px;overflow:visible;width:100%}ion-item-sliding{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:var(--kirby-border-radius-n)}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:var(--kirby-list-border-top-radius) var(--kirby-list-border-top-radius) var(--kirby-list-border-bottom-radius) var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-list-header{border-top-left-radius:var(--kirby-list-border-top-radius);border-top-right-radius:var(--kirby-list-border-top-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) .footer{border-bottom-left-radius:var(--kirby-list-border-bottom-radius);border-bottom-right-radius:var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}kirby-list-item{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}kirby-list-item:first-of-type{--kirby-content-border-top-radius: var(--kirby-list-border-top-radius)}kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: var(--kirby-list-border-bottom-radius)}.has-header kirby-list-item:first-of-type{--kirby-content-border-top-radius: 0}.has-footer kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: 0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset;--kirby-item-background: transparent;--kirby-list-item-border-color: var(--kirby-medium)}:host-context(kirby-card){--kirby-list-item-border-color: var(--kirby-background-color)}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"] }]
|
|
550
|
+
], template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n @if (headerTemplate) {\n <ion-list-header>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n @if (footerTemplate) {\n <div class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n }\n</ion-list>\n\n@if (!isLoadOnDemandEnabled && noMoreItemsText) {\n <p class=\"no-more-items\">\n {{ noMoreItemsText }}\n </p>\n}\n@if (_isLoading) {\n <div class=\"loading\">\n <kirby-spinner></kirby-spinner>\n </div>\n}\n\n<ng-template #groupedListTemplate>\n @for (section of _groupedItems; track sectionTrackBy($index, section)) {\n <ion-item-group [ngClass]=\"standAloneClass()\">\n @if (_isSectionsEnabled) {\n <ion-item-divider>\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n }\n @if (_isSectionsEnabled && _isStandAloneEnabled) {\n @for (list of section.lists; track list) {\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n }\n } @else {\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n }\n </ion-item-group>\n }\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n @for (item of items; track trackBy ? trackBy($index, item) : $index; let i = $index) {\n <kirby-list-item\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n ></kirby-list-item>\n }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block}:host(:not(kirby-list-item)){--kirby-list-border-top-radius: var( --kirby-content-border-top-radius, var(--kirby-border-radius-n) );--kirby-list-border-bottom-radius: var( --kirby-content-border-bottom-radius, var(--kirby-border-radius-n) )}.list{box-shadow:0 1px 24px #1c1c1c0a;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:clamp(12px,.875rem,28px);min-height:56px;overflow:visible;width:100%}ion-item-sliding{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}ion-item-sliding.item-sliding-active-slide{backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 1px 24px #1c1c1c0a;border-radius:var(--kirby-border-radius-n)}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:var(--kirby-list-border-top-radius) var(--kirby-list-border-top-radius) var(--kirby-list-border-bottom-radius) var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) ion-list-header{border-top-left-radius:var(--kirby-list-border-top-radius);border-top-right-radius:var(--kirby-list-border-top-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}:host-context(.shape-rounded) .footer{border-bottom-left-radius:var(--kirby-list-border-bottom-radius);border-bottom-right-radius:var(--kirby-list-border-bottom-radius)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}kirby-list-item{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}kirby-list-item:first-of-type{--kirby-content-border-top-radius: var(--kirby-list-border-top-radius)}kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: var(--kirby-list-border-bottom-radius)}.has-header kirby-list-item:first-of-type{--kirby-content-border-top-radius: 0}.has-footer kirby-list-item:last-of-type{--kirby-content-border-bottom-radius: 0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset;--kirby-item-background: transparent;--kirby-list-item-border-color: var(--kirby-medium)}:host-context(kirby-card){--kirby-list-item-border-color: var(--kirby-background-color)}:host-context(kirby-card.outlined){--kirby-list-item-border-color: var(--kirby-medium)}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxxxl{margin-bottom:72px}.stand-alone-bottom-margin-xxxxl{margin-bottom:64px}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"] }]
|
|
551
551
|
}], ctorParameters: () => [{ type: ListHelper }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { list: [{
|
|
552
552
|
type: ViewChild,
|
|
553
553
|
args: ['list', { static: true }]
|