@kirbydesign/designsystem 11.11.0-dev-1d9b4cd → 11.11.1

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-popover.mjs","sources":["../../popover/src/popover.component.ts","../../popover/src/kirbydesign-designsystem-popover.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\nimport { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';\n\nexport enum HorizontalDirection {\n  right = 'right',\n  left = 'left',\n}\n\n@Component({\n  selector: 'kirby-popover',\n  template: `\n    <div #wrapper class=\"wrapper\"><ng-content></ng-content></div>\n  `,\n  styleUrls: ['./popover.component.scss'],\n})\nexport class PopoverComponent implements AfterViewInit, OnDestroy {\n  // removeEventListener same instance of event handler & options\n  private readonly preventScrollEventListenerOptions = {\n    passive: false,\n  } as EventListenerOptions;\n\n  private readonly POPOVER_BODY_PADDING = 12;\n\n  private isShowing: boolean = false;\n  private isFirstToLockScroll: boolean;\n  private zIndex: number;\n  private document: Document;\n  private openingFrameId: ReturnType<typeof requestAnimationFrame> | null = null;\n\n  @ViewChild('wrapper', { static: true, read: ElementRef })\n  wrapperElement: ElementRef<HTMLDivElement>;\n\n  @Input()\n  popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n\n  @Input()\n  target: HTMLElement | ElementRef<HTMLElement>;\n\n  @Output()\n  willHide = new EventEmitter<void>();\n\n  private get targetElement(): HTMLElement {\n    if (this.target instanceof ElementRef) {\n      return this.target.nativeElement;\n    } else {\n      return this.target;\n    }\n  }\n\n  @HostListener('window:resize')\n  _onWindowResize() {\n    this.hide();\n  }\n\n  private disposeTouchMoveListener: EventListenerDisposeFn;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {\n    this.document = elementRef.nativeElement.ownerDocument;\n  }\n\n  ngAfterViewInit(): void {\n    this.placePopoverAboveClosestModal();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.hide();\n  }\n\n  private placePopoverAboveClosestModal() {\n    const closestIonModal = this.elementRef.nativeElement.closest('ion-modal');\n    if (closestIonModal) {\n      this.zIndex = parseInt((closestIonModal as HTMLElement).style.zIndex) + 1;\n      this.elementRef.nativeElement.style.zIndex = `${this.zIndex}`;\n    } else {\n      this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));\n    }\n  }\n\n  private static preventEventOutsidePopover(event: TouchEvent) {\n    if (event.target instanceof HTMLElement) {\n      const targetIsInPopover = !!event.target.closest('kirby-popover');\n      if (!targetIsInPopover) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  private preventScroll() {\n    this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');\n    if (this.isFirstToLockScroll) {\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.disposeTouchMoveListener = this.renderer.listen(\n      this.document,\n      'touchmove',\n      PopoverComponent.preventEventOutsidePopover,\n      this.preventScrollEventListenerOptions\n    );\n  }\n\n  private releaseScroll() {\n    if (this.isFirstToLockScroll) {\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.disposeTouchMoveListener?.();\n  }\n\n  show() {\n    this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    this.preventScroll();\n    this.isShowing = true;\n\n    this.openingFrameId = requestAnimationFrame(() => {\n      this.openingFrameId = null;\n      if (!this.isShowing) return;\n      this.positionWrapper();\n      this.renderer.addClass(this.elementRef.nativeElement, 'is-open');\n      this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n    });\n  }\n\n  hide() {\n    if (!this.isShowing) return;\n\n    if (this.openingFrameId !== null) {\n      cancelAnimationFrame(this.openingFrameId);\n      this.openingFrameId = null;\n      this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n    }\n\n    this.willHide.emit();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n    this.releaseScroll();\n\n    this.renderer.removeStyle(this.targetElement, 'z-index');\n    this.renderer.removeStyle(this.targetElement, 'pointer-events');\n    this.isShowing = false;\n  }\n\n  private positionWrapper() {\n    const targetDimensions = this.targetElement.getBoundingClientRect();\n\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    const wrapperElement = this.wrapperElement.nativeElement;\n    const wrapperDimensions = wrapperElement.getBoundingClientRect();\n    const viewport = wrapperElement.ownerDocument.defaultView;\n    this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n    this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n  }\n\n  private positionHorizontally(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortWidth = viewPort.innerWidth;\n    const contentWidth = wrapperDimensions.width;\n    const availableSpaceRight = viewPortWidth - targetDimensions.left;\n    const availableSpaceLeft = targetDimensions.right;\n    const contentCanFitRightOfTarget =\n      availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;\n    const openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;\n\n    const [direction, oppositeDirection] =\n      this.popout === HorizontalDirection.left || !openRight\n        ? ['left', 'right']\n        : ['right', 'left'];\n\n    const pxValue =\n      direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n  }\n\n  private positionVertically(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortHeight = viewPort.innerHeight;\n    const contentHeight = wrapperDimensions.height;\n    const availableSpaceDown = viewPortHeight - targetDimensions.bottom;\n    const availableSpaceUp = targetDimensions.top;\n    const contentCanFitBelowTarget =\n      availableSpaceDown >= contentHeight + this.POPOVER_BODY_PADDING;\n\n    const isAvailableSpaceBelow =\n      contentCanFitBelowTarget || availableSpaceDown >= availableSpaceUp;\n    const [direction, oppositeDirection] = isAvailableSpaceBelow\n      ? ['bottom', 'top']\n      : ['top', 'bottom'];\n\n    const pxValue =\n      direction === 'bottom' ? targetDimensions.bottom : viewPortHeight - targetDimensions.top;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n\n    if (direction === 'top') {\n      // Ensure target is elevated above shadows in popover, i.e. content wrapped in Card:\n      this.renderer.setStyle(this.targetElement, 'z-index', `${this.zIndex + 1}`);\n      this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;IAeY;AAAZ,CAAA,UAAY,mBAAmB,EAAA;AAC7B,IAAA,mBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,mBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,GAAA,EAAA,CAAA,CAAA;MAYlB,gBAAgB,CAAA;AA0B3B,IAAA,IAAY,aAAa,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,MAAM,YAAY,UAAU,EAAE;AACrC,YAAA,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa;QAClC;aAAO;YACL,OAAO,IAAI,CAAC,MAAM;QACpB;IACF;IAGA,eAAe,GAAA;QACb,IAAI,CAAC,IAAI,EAAE;IACb;IAIA,WAAA,CACU,UAAmC,EACnC,QAAmB,EAAA;QADnB,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,QAAQ,GAAR,QAAQ;;AAzCD,QAAA,IAAA,CAAA,iCAAiC,GAAG;AACnD,YAAA,OAAO,EAAE,KAAK;SACS;QAER,IAAA,CAAA,oBAAoB,GAAG,EAAE;QAElC,IAAA,CAAA,SAAS,GAAY,KAAK;QAI1B,IAAA,CAAA,cAAc,GAAoD,IAAI;AAM9E,QAAA,IAAA,CAAA,MAAM,GAAmD,mBAAmB,CAAC,KAAK;AAMlF,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,YAAY,EAAQ;QAqBjC,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC,aAAa,CAAC,aAAa;IACxD;IAEA,eAAe,GAAA;QACb,IAAI,CAAC,6BAA6B,EAAE;AACpC,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CACvB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,EAC3C,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9B;IACH;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,IAAI,EAAE;IACb;IAEQ,6BAA6B,GAAA;AACnC,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;QAC1E,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAE,eAA+B,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;AACzE,YAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,MAAM,EAAE;QAC/D;aAAO;AACL,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,iBAAiB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC7D;IACF;IAEQ,OAAO,0BAA0B,CAAC,KAAiB,EAAA;AACzD,QAAA,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE;AACvC,YAAA,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;YACjE,IAAI,CAAC,iBAAiB,EAAE;gBACtB,KAAK,CAAC,cAAc,EAAE;YACxB;QACF;IACF;IAEQ,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,mBAAmB,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;AACvF,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,oBAAoB,CAAC;QAClE;QAEA,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAClD,IAAI,CAAC,QAAQ,EACb,WAAW,EACX,gBAAgB,CAAC,0BAA0B,EAC3C,IAAI,CAAC,iCAAiC,CACvC;IACH;IAEQ,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,oBAAoB,CAAC;QACrE;AAEA,QAAA,IAAI,CAAC,wBAAwB,IAAI;IACnC;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,YAAY,CAAC;AACnE,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QAE5E,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AAErB,QAAA,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,MAAK;AAC/C,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;YAC1B,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE;YACrB,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC;AAChE,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,YAAY,CAAC;AACxE,QAAA,CAAC,CAAC;IACJ;IAEA,IAAI,GAAA;QACF,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;AAErB,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;AAChC,YAAA,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;AACzC,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,YAAY,CAAC;QACxE;AAEA,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CACvB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,EAC3C,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9B;QACD,IAAI,CAAC,aAAa,EAAE;QAEpB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC;QACxD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC;AAC/D,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;IACxB;IAEQ,eAAe,GAAA;QACrB,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE;AAEnE,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;AAE5E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa;AACxD,QAAA,MAAM,iBAAiB,GAAG,cAAc,CAAC,qBAAqB,EAAE;AAChE,QAAA,MAAM,QAAQ,GAAG,cAAc,CAAC,aAAa,CAAC,WAAW;QACzD,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,cAAc,EAAE,gBAAgB,EAAE,iBAAiB,CAAC;QACxF,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,cAAc,EAAE,gBAAgB,EAAE,iBAAiB,CAAC;IACxF;AAEQ,IAAA,oBAAoB,CAC1B,QAAgB,EAChB,cAA8B,EAC9B,gBAAyB,EACzB,iBAA0B,EAAA;AAE1B,QAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,UAAU;AACzC,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,KAAK;AAC5C,QAAA,MAAM,mBAAmB,GAAG,aAAa,GAAG,gBAAgB,CAAC,IAAI;AACjE,QAAA,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,KAAK;QACjD,MAAM,0BAA0B,GAC9B,mBAAmB,IAAI,YAAY,GAAG,IAAI,CAAC,oBAAoB;AACjE,QAAA,MAAM,SAAS,GAAG,0BAA0B,IAAI,mBAAmB,IAAI,kBAAkB;AAEzF,QAAA,MAAM,CAAC,SAAS,EAAE,iBAAiB,CAAC,GAClC,IAAI,CAAC,MAAM,KAAK,mBAAmB,CAAC,IAAI,IAAI,CAAC;AAC3C,cAAE,CAAC,MAAM,EAAE,OAAO;AAClB,cAAE,CAAC,OAAO,EAAE,MAAM,CAAC;AAEvB,QAAA,MAAM,OAAO,GACX,SAAS,KAAK,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI;QAEvF,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC;AACpD,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,cAAc,EAAE,iBAAiB,EAAE,CAAA,EAAG,OAAO,CAAA,EAAA,CAAI,CAAC;IAC3E;AAEQ,IAAA,kBAAkB,CACxB,QAAgB,EAChB,cAA8B,EAC9B,gBAAyB,EACzB,iBAA0B,EAAA;AAE1B,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,WAAW;AAC3C,QAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,MAAM;AAC9C,QAAA,MAAM,kBAAkB,GAAG,cAAc,GAAG,gBAAgB,CAAC,MAAM;AACnE,QAAA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,GAAG;QAC7C,MAAM,wBAAwB,GAC5B,kBAAkB,IAAI,aAAa,GAAG,IAAI,CAAC,oBAAoB;AAEjE,QAAA,MAAM,qBAAqB,GACzB,wBAAwB,IAAI,kBAAkB,IAAI,gBAAgB;AACpE,QAAA,MAAM,CAAC,SAAS,EAAE,iBAAiB,CAAC,GAAG;AACrC,cAAE,CAAC,QAAQ,EAAE,KAAK;AAClB,cAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;AAErB,QAAA,MAAM,OAAO,GACX,SAAS,KAAK,QAAQ,GAAG,gBAAgB,CAAC,MAAM,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;QAE1F,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC;AACpD,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,cAAc,EAAE,iBAAiB,EAAE,CAAA,EAAG,OAAO,CAAA,EAAA,CAAI,CAAC;AAEzE,QAAA,IAAI,SAAS,KAAK,KAAK,EAAE;;AAEvB,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA,CAAE,CAAC;AAC3E,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,gBAAgB,EAAE,MAAM,CAAC;QACtE;IACF;kIA9MW,gBAAgB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAciB,UAAU,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnB5C;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yQAAA,CAAA,EAAA,CAAA,CAAA;;4FAGU,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,QAAA,EACf;;AAET,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,yQAAA,CAAA,EAAA;;sBAiBA,SAAS;uBAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE;;sBAGvD;;sBAGA;;sBAGA;;sBAWA,YAAY;uBAAC,eAAe;;;AC7D/B;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-popover.mjs","sources":["../../popover/src/popover.component.ts","../../popover/src/kirbydesign-designsystem-popover.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\nimport { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';\n\nexport enum HorizontalDirection {\n  right = 'right',\n  left = 'left',\n}\n\n@Component({\n  selector: 'kirby-popover',\n  template: `\n    <div #wrapper class=\"wrapper\"><ng-content></ng-content></div>\n  `,\n  styleUrls: ['./popover.component.scss'],\n})\nexport class PopoverComponent implements AfterViewInit, OnDestroy {\n  // removeEventListener same instance of event handler & options\n  private readonly preventScrollEventListenerOptions = {\n    passive: false,\n  } as EventListenerOptions;\n\n  private readonly POPOVER_BODY_PADDING = 12;\n\n  private isShowing: boolean = false;\n  private isFirstToLockScroll: boolean;\n  private zIndex: number;\n  private document: Document;\n  private openingFrameId: ReturnType<typeof requestAnimationFrame> | null = null;\n\n  @ViewChild('wrapper', { static: true, read: ElementRef })\n  wrapperElement: ElementRef<HTMLDivElement>;\n\n  @Input()\n  popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n\n  @Input()\n  target: HTMLElement | ElementRef<HTMLElement>;\n\n  @Output()\n  willHide = new EventEmitter<void>();\n\n  private get targetElement(): HTMLElement {\n    if (this.target instanceof ElementRef) {\n      return this.target.nativeElement;\n    } else {\n      return this.target;\n    }\n  }\n\n  @HostListener('window:resize')\n  _onWindowResize() {\n    this.hide();\n  }\n\n  private disposeTouchMoveListener: EventListenerDisposeFn;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {\n    this.document = elementRef.nativeElement.ownerDocument;\n  }\n\n  ngAfterViewInit(): void {\n    this.placePopoverAboveClosestModal();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.hide();\n  }\n\n  private placePopoverAboveClosestModal() {\n    const closestIonModal = this.elementRef.nativeElement.closest('ion-modal');\n    if (closestIonModal) {\n      this.zIndex = parseInt((closestIonModal as HTMLElement).style.zIndex) + 1;\n      this.elementRef.nativeElement.style.zIndex = `${this.zIndex}`;\n    } else {\n      this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));\n    }\n  }\n\n  private static preventEventOutsidePopover(event: TouchEvent) {\n    if (event.target instanceof HTMLElement) {\n      const targetIsInPopover = !!event.target.closest('kirby-popover');\n      if (!targetIsInPopover) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  private preventScroll() {\n    this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');\n    if (this.isFirstToLockScroll) {\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.disposeTouchMoveListener = this.renderer.listen(\n      this.document,\n      'touchmove',\n      PopoverComponent.preventEventOutsidePopover,\n      this.preventScrollEventListenerOptions\n    );\n  }\n\n  private releaseScroll() {\n    if (this.isFirstToLockScroll) {\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.disposeTouchMoveListener?.();\n  }\n\n  show() {\n    this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    this.preventScroll();\n    this.isShowing = true;\n\n    this.openingFrameId = requestAnimationFrame(() => {\n      this.openingFrameId = null;\n      if (!this.isShowing) return;\n      this.positionWrapper();\n      this.renderer.addClass(this.elementRef.nativeElement, 'is-open');\n      this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n    });\n  }\n\n  hide() {\n    if (!this.isShowing) return;\n\n    if (this.openingFrameId !== null) {\n      cancelAnimationFrame(this.openingFrameId);\n      this.openingFrameId = null;\n      this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n    }\n\n    this.willHide.emit();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n    this.releaseScroll();\n\n    this.renderer.removeStyle(this.targetElement, 'z-index');\n    this.renderer.removeStyle(this.targetElement, 'pointer-events');\n    this.isShowing = false;\n  }\n\n  private positionWrapper() {\n    const targetDimensions = this.targetElement.getBoundingClientRect();\n\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    const wrapperElement = this.wrapperElement.nativeElement;\n    const wrapperDimensions = wrapperElement.getBoundingClientRect();\n    const viewport = wrapperElement.ownerDocument.defaultView;\n    this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n    this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n  }\n\n  private positionHorizontally(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortWidth = viewPort.innerWidth;\n    const contentWidth = wrapperDimensions.width;\n    const availableSpaceRight = viewPortWidth - targetDimensions.left;\n    const availableSpaceLeft = targetDimensions.right;\n    const contentCanFitRightOfTarget =\n      availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;\n    const openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;\n\n    const [direction, oppositeDirection] =\n      this.popout === HorizontalDirection.left || !openRight\n        ? ['left', 'right']\n        : ['right', 'left'];\n\n    const pxValue =\n      direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n  }\n\n  private positionVertically(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortHeight = viewPort.innerHeight;\n    const contentHeight = wrapperDimensions.height;\n    const availableSpaceDown = viewPortHeight - targetDimensions.bottom;\n    const availableSpaceUp = targetDimensions.top;\n    const contentCanFitBelowTarget =\n      availableSpaceDown >= contentHeight + this.POPOVER_BODY_PADDING;\n\n    const isAvailableSpaceBelow =\n      contentCanFitBelowTarget || availableSpaceDown >= availableSpaceUp;\n    const [direction, oppositeDirection] = isAvailableSpaceBelow\n      ? ['bottom', 'top']\n      : ['top', 'bottom'];\n\n    const pxValue =\n      direction === 'bottom' ? targetDimensions.bottom : viewPortHeight - targetDimensions.top;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n\n    if (direction === 'top') {\n      // Ensure target is elevated above shadows in popover, i.e. content wrapped in Card:\n      this.renderer.setStyle(this.targetElement, 'z-index', `${this.zIndex + 1}`);\n      this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-progress-circle.mjs

@@ -4,48 +4,61 @@ import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
 
 class ProgressCircleRingComponent {
     constructor() {
-        this.UPPER_AND_LOWER_BOUND_GAP = 2.5;
         this.value = 0;
         this.themeColor = 'success';
-        this.size = 'md';
-    }
-    get _sizeClass() {
-        return this.size;
     }
     ngAfterViewInit() {
         this.viewInitialized = true;
     }
-    get _progress() {
-        if (this.value <= 0)
-            return 0;
-        if (this.value >= 100)
-            return 100;
-        return Math.min(this.value, 100 - this.UPPER_AND_LOWER_BOUND_GAP);
+    get _diameter() {
+        return this.radius * 2;
+    }
+    get _centerRadius() {
+        return this.radius - this.strokeWidth / 2;
+    }
+    get _centerCircumference() {
+        return this._centerRadius * 2 * Math.PI;
     }
-    get _linecap() {
-        return this._progress <= 0 || this._progress >= 100 ? 'butt' : 'round';
+    get _progress() {
+        const valueWithinBounds = this.value < this.upperBound || this.value > 99;
+        const _value = valueWithinBounds ? this.value : this.upperBound;
+        const progressPercentage = _value / 100;
+        return this._centerCircumference * progressPercentage;
     }
     get _remainder() {
-        return 100 - this._progress;
+        return this._centerCircumference - this._progress;
+    }
+    get _progressStrokeWidth() {
+        // Do not render stroke if progress is 0, otherwise it will show as a dot
+        if (this._progress === 0)
+            return 0;
+        return this.strokeWidth;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressCircleRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ProgressCircleRingComponent, isStandalone: true, selector: "kirby-progress-circle-ring", inputs: { value: "value", themeColor: "themeColor", size: "size" }, host: { properties: { "class": "this._sizeClass", "class.view-initialized": "this.viewInitialized" } }, ngImport: i0, template: "<svg width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    cx=\"50%\"\n    cy=\"50%\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    pathLength=\"100\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.stroke-linecap]=\"_linecap\"\n    [attr.stroke-dasharray]=\"_progress + ' ' + _remainder\"\n  />\n</svg>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{width:100%;height:100%}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success-shade)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning-shade)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:var(--kirby-transition-duration-extra-long);transition-timing-function:var(--kirby-transition-easing-enter-exit);transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}svg{rotate:-90deg}.circle,.progress{r:calc(50% - var(--kirby-progress-circle-stroke-width, 4px) / 2);stroke-width:var(--kirby-progress-circle-stroke-width, 4px)}.circle{stroke:var(--kirby-semi-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ProgressCircleRingComponent, isStandalone: true, selector: "kirby-progress-circle-ring", inputs: { radius: "radius", value: "value", themeColor: "themeColor", strokeWidth: "strokeWidth", upperBound: "upperBound" }, host: { properties: { "class.view-initialized": "this.viewInitialized", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success-shade)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning-shade)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressCircleRingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-progress-circle-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    cx=\"50%\"\n    cy=\"50%\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    pathLength=\"100\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.stroke-linecap]=\"_linecap\"\n    [attr.stroke-dasharray]=\"_progress + ' ' + _remainder\"\n  />\n</svg>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{width:100%;height:100%}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success-shade)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning-shade)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:var(--kirby-transition-duration-extra-long);transition-timing-function:var(--kirby-transition-easing-enter-exit);transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}svg{rotate:-90deg}.circle,.progress{r:calc(50% - var(--kirby-progress-circle-stroke-width, 4px) / 2);stroke-width:var(--kirby-progress-circle-stroke-width, 4px)}.circle{stroke:var(--kirby-semi-light)}\n"] }]
-        }], propDecorators: { value: [{
+            args: [{ selector: 'kirby-progress-circle-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success-shade)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning-shade)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"] }]
+        }], propDecorators: { radius: [{
+                type: Input
+            }], value: [{
                 type: Input
             }], themeColor: [{
                 type: Input
-            }], size: [{
+            }], strokeWidth: [{
+                type: Input
+            }], upperBound: [{
                 type: Input
-            }], _sizeClass: [{
-                type: HostBinding,
-                args: ['class']
             }], viewInitialized: [{
                 type: HostBinding,
                 args: ['class.view-initialized']
+            }], _diameter: [{
+                type: HostBinding,
+                args: ['style.width.px']
+            }, {
+                type: HostBinding,
+                args: ['style.height.px']
             }] } });
 
 class ProgressCircleComponent {
@@ -55,6 +68,11 @@ class ProgressCircleComponent {
     constructor(elementRef, changeDetectorRef) {
         this.elementRef = elementRef;
         this.changeDetectorRef = changeDetectorRef;
+        this.SIZE_CONFIG = {
+            sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },
+            md: { diameter: 56, strokeWidth: 4, upperBound: 96 },
+            lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },
+        };
         this.role = 'progressbar';
         this.value = 0;
         this.size = 'md';
@@ -87,16 +105,29 @@ class ProgressCircleComponent {
             }
         }
     }
+    get _diameter() {
+        return this.SIZE_CONFIG[this.size].diameter;
+    }
     get _shownValue() {
         // This is needed to make an animation [0 -> value] when element is shown to the user
         return this.hasElementBeenVisible ? this.value : 0;
     }
+    get _radius() {
+        return this._diameter / 2;
+    }
+    get _strokeWidth() {
+        return this.SIZE_CONFIG[this.size].strokeWidth;
+    }
+    get _upperBound() {
+        // This is needed to make sure that an input value close to 100 is not shown as 100
+        return this.SIZE_CONFIG[this.size].upperBound;
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressCircleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ProgressCircleComponent, isStandalone: true, selector: "kirby-progress-circle", inputs: { value: "value", size: "size", themeColor: "themeColor" }, host: { properties: { "attr.role": "this.role", "attr.aria-valuenow": "this.value", "class": "this._cssSize" } }, ngImport: i0, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [size]=\"size\"\n></kirby-progress-circle-ring>\n", styles: [":host{display:inline-block;position:relative;overflow:hidden;width:var(--kirby-progress-circle-size);height:var(--kirby-progress-circle-size)}:host(.sm){--kirby-progress-circle-stroke-width: 3px;--kirby-progress-circle-size: clamp(var(--kirby-spacing-xl), 2.5em, var(--kirby-spacing-xxxl))}:host(.md){--kirby-progress-circle-stroke-width: 4px;--kirby-progress-circle-size: var(--kirby-spacing-xxxl)}:host(.lg){--kirby-progress-circle-stroke-width: 6px;--kirby-progress-circle-size: calc(var(--kirby-spacing-xxxl) + var(--kirby-spacing-xl))}:host(.sm) .transcluded-content{font-size:var(--kirby-font-size-xs)}:host(.md) .transcluded-content,:host(.lg) .transcluded-content{font-size:var(--kirby-font-size-s)}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:calc(var(--kirby-z-index-default) + 1)}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:var(--kirby-z-index-default);border-radius:var(--kirby-border-radius-circle);overflow:hidden}\n"], dependencies: [{ kind: "component", type: ProgressCircleRingComponent, selector: "kirby-progress-circle-ring", inputs: ["value", "themeColor", "size"] }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ProgressCircleComponent, isStandalone: true, selector: "kirby-progress-circle", inputs: { value: "value", size: "size", themeColor: "themeColor" }, host: { properties: { "attr.role": "this.role", "attr.aria-valuenow": "this.value", "class": "this._cssSize", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ProgressCircleRingComponent, selector: "kirby-progress-circle-ring", inputs: ["radius", "value", "themeColor", "strokeWidth", "upperBound"] }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ imports: [ProgressCircleRingComponent, ThemeColorDirective], selector: 'kirby-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [size]=\"size\"\n></kirby-progress-circle-ring>\n", styles: [":host{display:inline-block;position:relative;overflow:hidden;width:var(--kirby-progress-circle-size);height:var(--kirby-progress-circle-size)}:host(.sm){--kirby-progress-circle-stroke-width: 3px;--kirby-progress-circle-size: clamp(var(--kirby-spacing-xl), 2.5em, var(--kirby-spacing-xxxl))}:host(.md){--kirby-progress-circle-stroke-width: 4px;--kirby-progress-circle-size: var(--kirby-spacing-xxxl)}:host(.lg){--kirby-progress-circle-stroke-width: 6px;--kirby-progress-circle-size: calc(var(--kirby-spacing-xxxl) + var(--kirby-spacing-xl))}:host(.sm) .transcluded-content{font-size:var(--kirby-font-size-xs)}:host(.md) .transcluded-content,:host(.lg) .transcluded-content{font-size:var(--kirby-font-size-s)}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:calc(var(--kirby-z-index-default) + 1)}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:var(--kirby-z-index-default);border-radius:var(--kirby-border-radius-circle);overflow:hidden}\n"] }]
+            args: [{ imports: [ProgressCircleRingComponent, ThemeColorDirective], selector: 'kirby-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -112,6 +143,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }], _cssSize: [{
                 type: HostBinding,
                 args: ['class']
+            }], _diameter: [{
+                type: HostBinding,
+                args: ['style.width.px']
+            }, {
+                type: HostBinding,
+                args: ['style.height.px']
             }] } });
 
 /**

package/fesm2022/kirbydesign-designsystem-progress-circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-progress-circle.mjs","sources":["../../progress-circle/src/progress-circle-ring.component.ts","../../progress-circle/src/progress-circle-ring.component.html","../../progress-circle/src/progress-circle.component.ts","../../progress-circle/src/progress-circle.component.html","../../progress-circle/src/kirbydesign-designsystem-progress-circle.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n} from '@angular/core';\n\n@Component({\n  selector: 'kirby-progress-circle-ring',\n  templateUrl: './progress-circle-ring.component.html',\n  styleUrls: ['./progress-circle-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleRingComponent implements AfterViewInit {\n  private readonly UPPER_AND_LOWER_BOUND_GAP = 2.5;\n\n  @Input() value: number = 0;\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n  @Input() size: 'sm' | 'md' | 'lg' = 'md';\n\n  @HostBinding('class')\n  get _sizeClass() {\n    return this.size;\n  }\n\n  @HostBinding('class.view-initialized')\n  viewInitialized;\n\n  ngAfterViewInit(): void {\n    this.viewInitialized = true;\n  }\n\n  get _progress(): number {\n    if (this.value <= 0) return 0;\n    if (this.value >= 100) return 100;\n    return Math.min(this.value, 100 - this.UPPER_AND_LOWER_BOUND_GAP);\n  }\n\n  get _linecap(): 'butt' | 'round' {\n    return this._progress <= 0 || this._progress >= 100 ? 'butt' : 'round';\n  }\n\n  get _remainder(): number {\n    return 100 - this._progress;\n  }\n}\n","<svg width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    cx=\"50%\"\n    cy=\"50%\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    pathLength=\"100\"\n    cx=\"50%\"\n    cy=\"50%\"\n    [attr.stroke-linecap]=\"_linecap\"\n    [attr.stroke-dasharray]=\"_progress + ' ' + _remainder\"\n  />\n</svg>\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n} from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { ProgressCircleRingComponent } from './progress-circle-ring.component';\n\n@Component({\n  imports: [ProgressCircleRingComponent, ThemeColorDirective],\n  selector: 'kirby-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleComponent implements AfterViewInit, OnDestroy {\n  @HostBinding('attr.role') readonly role = 'progressbar';\n  @HostBinding('attr.aria-valuenow')\n  @Input()\n  value: number = 0;\n  @Input() size: 'sm' | 'md' | 'lg' = 'md';\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n\n  @HostBinding('class')\n  get _cssSize() {\n    return this.size;\n  }\n\n  private hasElementBeenVisible?: boolean;\n  private observer: IntersectionObserver;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewInit(): void {\n    if (!this.observer) {\n      this.observer = new IntersectionObserver(this.onIntersectionChange, {\n        threshold: 0.5,\n      });\n      this.observer.observe(this.elementRef.nativeElement);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unobserve();\n  }\n\n  private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {\n    this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);\n    if (this.hasElementBeenVisible) {\n      this.unobserve();\n      this.changeDetectorRef.markForCheck();\n    }\n  };\n\n  private unobserve() {\n    if (this.observer) {\n      this.observer.unobserve(this.elementRef.nativeElement);\n      // Safari does not support \"disconnect\", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility\n      if (typeof this.observer.disconnect === 'function') {\n        this.observer.disconnect();\n      }\n    }\n  }\n\n  get _shownValue() {\n    // This is needed to make an animation [0 -> value] when element is shown to the user\n    return this.hasElementBeenVisible ? this.value : 0;\n  }\n}\n","<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [size]=\"size\"\n></kirby-progress-circle-ring>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-progress-circle.mjs","sources":["../../progress-circle/src/progress-circle-ring.component.ts","../../progress-circle/src/progress-circle-ring.component.html","../../progress-circle/src/progress-circle.component.ts","../../progress-circle/src/progress-circle.component.html","../../progress-circle/src/kirbydesign-designsystem-progress-circle.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n} from '@angular/core';\n\n@Component({\n  selector: 'kirby-progress-circle-ring',\n  templateUrl: './progress-circle-ring.component.html',\n  styleUrls: ['./progress-circle-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleRingComponent implements AfterViewInit {\n  @Input() radius: number; // The desired outer radius of the SVG circle\n  @Input() value: number = 0;\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n  @Input() strokeWidth: number;\n  @Input() upperBound: number;\n\n  @HostBinding('class.view-initialized')\n  viewInitialized;\n\n  ngAfterViewInit(): void {\n    this.viewInitialized = true;\n  }\n\n  @HostBinding('style.width.px')\n  @HostBinding('style.height.px')\n  get _diameter(): number {\n    return this.radius * 2;\n  }\n\n  get _centerRadius(): number {\n    return this.radius - this.strokeWidth / 2;\n  }\n\n  get _centerCircumference(): number {\n    return this._centerRadius * 2 * Math.PI;\n  }\n\n  get _progress(): number {\n    const valueWithinBounds = this.value < this.upperBound || this.value > 99;\n    const _value = valueWithinBounds ? this.value : this.upperBound;\n    const progressPercentage = _value / 100;\n    return this._centerCircumference * progressPercentage;\n  }\n\n  get _remainder(): number {\n    return this._centerCircumference - this._progress;\n  }\n\n  get _progressStrokeWidth(): number {\n    // Do not render stroke if progress is 0, otherwise it will show as a dot\n    if (this._progress === 0) return 0;\n\n    return this.strokeWidth;\n  }\n}\n","<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\" aria-hidden=\"true\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n} from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { ProgressCircleRingComponent } from './progress-circle-ring.component';\n\n@Component({\n  imports: [ProgressCircleRingComponent, ThemeColorDirective],\n  selector: 'kirby-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleComponent implements AfterViewInit, OnDestroy {\n  readonly SIZE_CONFIG = {\n    sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },\n    md: { diameter: 56, strokeWidth: 4, upperBound: 96 },\n    lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },\n  };\n\n  @HostBinding('attr.role') readonly role = 'progressbar';\n  @HostBinding('attr.aria-valuenow')\n  @Input()\n  value: number = 0;\n  @Input() size: 'sm' | 'md' | 'lg' = 'md';\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n\n  @HostBinding('class')\n  get _cssSize() {\n    return this.size;\n  }\n\n  private hasElementBeenVisible?: boolean;\n  private observer: IntersectionObserver;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewInit(): void {\n    if (!this.observer) {\n      this.observer = new IntersectionObserver(this.onIntersectionChange, {\n        threshold: 0.5,\n      });\n      this.observer.observe(this.elementRef.nativeElement);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unobserve();\n  }\n\n  private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {\n    this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);\n    if (this.hasElementBeenVisible) {\n      this.unobserve();\n      this.changeDetectorRef.markForCheck();\n    }\n  };\n\n  private unobserve() {\n    if (this.observer) {\n      this.observer.unobserve(this.elementRef.nativeElement);\n      // Safari does not support \"disconnect\", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility\n      if (typeof this.observer.disconnect === 'function') {\n        this.observer.disconnect();\n      }\n    }\n  }\n\n  @HostBinding('style.width.px')\n  @HostBinding('style.height.px')\n  get _diameter(): number {\n    return this.SIZE_CONFIG[this.size].diameter;\n  }\n\n  get _shownValue() {\n    // This is needed to make an animation [0 -> value] when element is shown to the user\n    return this.hasElementBeenVisible ? this.value : 0;\n  }\n\n  get _radius() {\n    return this._diameter / 2;\n  }\n\n  get _strokeWidth() {\n    return this.SIZE_CONFIG[this.size].strokeWidth;\n  }\n\n  get _upperBound() {\n    // This is needed to make sure that an input value close to 100 is not shown as 100\n    return this.SIZE_CONFIG[this.size].upperBound;\n  }\n}\n","<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-radio.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { ElementRef, HostBinding, Input, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, TemplateRef, HostListener, ContentChildren, ViewChildren, ContentChild, Output, NgModule } from '@angular/core';
-import { IonRadio, IonRadioGroup } from '@ionic/angular';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
 import * as i1 from '@kirbydesign/designsystem/helpers';
 import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
 import { inheritAriaLabelText, setAccessibleLabel, forwardAttributes } from '@kirbydesign/designsystem/shared';
@@ -54,11 +54,11 @@ class RadioComponent {
         this.ionRadioElement?.nativeElement.focus();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: RadioComponent, isStandalone: true, selector: "kirby-radio", inputs: { value: "value", text: "text", size: "size", disabled: "disabled" }, host: { properties: { "class": "this.size", "attr.disabled": "this._isDisabled", "class.has-hidden-label": "this._labelText" } }, providers: [IonicElementPartHelper], viewQueries: [{ propertyName: "ionRadioElement", first: true, predicate: IonRadio, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-radio>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}:host[disabled] ion-radio::part(mark){--color-checked: var(--kirby-semi-dark)}:host[disabled] ion-radio::part(label-text-wrapper){opacity:1}:host[disabled] ion-radio::part(native-wrapper){opacity:1}:host:has(ion-radio.in-item.radio-justify-space-between){width:100%}:host.has-hidden-label:has(ion-radio.in-item){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio{position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio::part(label){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-radio{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.xs ion-radio:not(.in-item)::part(label){padding-block:calc((32px - var(--kirby-spacing-m)) * .5)}:host.sm ion-radio:not(.in-item)::part(label){padding-block:calc((44px - var(--kirby-spacing-m)) * .5)}:host.md ion-radio:not(.in-item)::part(label){padding-block:calc((56px - var(--kirby-spacing-m)) * .5)}ion-radio:focus-within{--border-width: 0;--color: transparent}ion-radio:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-radio{box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media(hover:hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color-checked: rgb(52.6486343612, 207.7113656388, 125.2311894273)}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;background-color:var(--kirby-white);margin:var(--kirby-spacing-xxxxs);width:20px;height:20px}ion-radio::part(mark){width:var(--kirby-spacing-xs);height:var(--kirby-spacing-xs)}ion-radio::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}ion-radio::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}ion-radio::part(native-wrapper){height:var(--kirby-relative-size-m)}ion-radio.in-item::part(label){align-items:center;padding-inline:0}ion-radio.in-item::part(label-text-wrapper){margin-block:0}ion-radio.in-item.radio-label-placement-start::part(label-text-wrapper){margin-inline:0 var(--kirby-spacing-xxs)}ion-radio.in-item.radio-label-placement-end::part(label-text-wrapper){margin-inline:var(--kirby-spacing-xxs) 0}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked:not(:focus,.radio-disabled)::part(container){box-shadow:var(--kirby-elevation-4)}ion-radio.radio-checked:not(:focus,:focus-within,.radio-disabled)::part(container){border-color:var(--kirby-semi-dark)}:host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"], outputs: ["ionFocus", "ionBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: RadioComponent, isStandalone: true, selector: "kirby-radio", inputs: { value: "value", text: "text", size: "size", disabled: "disabled" }, host: { properties: { "class": "this.size", "attr.disabled": "this._isDisabled", "class.has-hidden-label": "this._labelText" } }, providers: [IonicElementPartHelper], viewQueries: [{ propertyName: "ionRadioElement", first: true, predicate: IonRadio, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-radio>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}:host[disabled] ion-radio::part(mark){--color-checked: var(--kirby-semi-dark)}:host[disabled] ion-radio::part(label-text-wrapper){opacity:1}:host[disabled] ion-radio::part(native-wrapper){opacity:1}:host:has(ion-radio.in-item.radio-justify-space-between){width:100%}:host.has-hidden-label:has(ion-radio.in-item){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio{position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio::part(label){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-radio{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.xs ion-radio:not(.in-item)::part(label){padding-block:4px}:host.sm ion-radio:not(.in-item)::part(label){padding-block:10px}:host.md ion-radio:not(.in-item)::part(label){padding-block:16px}ion-radio:focus-within{--border-width: 0;--color: transparent}ion-radio:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-radio{box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media(hover:hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color-checked: rgb(52.6486343612, 207.7113656388, 125.2311894273)}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;background-color:var(--kirby-white);margin:2px;width:20px;height:20px}ion-radio::part(mark){width:12px;height:12px}ion-radio::part(label){align-items:start;padding-inline:16px;line-height:1.5}ion-radio::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}ion-radio::part(native-wrapper){height:1.5rem}ion-radio.in-item::part(label){align-items:center;padding-inline:0}ion-radio.in-item::part(label-text-wrapper){margin-block:0}ion-radio.in-item.radio-label-placement-start::part(label-text-wrapper){margin-inline:0 8px}ion-radio.in-item.radio-label-placement-end::part(label-text-wrapper){margin-inline:8px 0}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked:not(:focus,.radio-disabled)::part(container){box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}ion-radio.radio-checked:not(:focus,:focus-within,.radio-disabled)::part(container){border-color:var(--kirby-semi-dark)}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-radio', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], imports: [IonRadio], template: "<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-radio>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}:host[disabled] ion-radio::part(mark){--color-checked: var(--kirby-semi-dark)}:host[disabled] ion-radio::part(label-text-wrapper){opacity:1}:host[disabled] ion-radio::part(native-wrapper){opacity:1}:host:has(ion-radio.in-item.radio-justify-space-between){width:100%}:host.has-hidden-label:has(ion-radio.in-item){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio{position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio::part(label){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-radio{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.xs ion-radio:not(.in-item)::part(label){padding-block:calc((32px - var(--kirby-spacing-m)) * .5)}:host.sm ion-radio:not(.in-item)::part(label){padding-block:calc((44px - var(--kirby-spacing-m)) * .5)}:host.md ion-radio:not(.in-item)::part(label){padding-block:calc((56px - var(--kirby-spacing-m)) * .5)}ion-radio:focus-within{--border-width: 0;--color: transparent}ion-radio:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-radio{box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media(hover:hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color-checked: rgb(52.6486343612, 207.7113656388, 125.2311894273)}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;background-color:var(--kirby-white);margin:var(--kirby-spacing-xxxxs);width:20px;height:20px}ion-radio::part(mark){width:var(--kirby-spacing-xs);height:var(--kirby-spacing-xs)}ion-radio::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}ion-radio::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}ion-radio::part(native-wrapper){height:var(--kirby-relative-size-m)}ion-radio.in-item::part(label){align-items:center;padding-inline:0}ion-radio.in-item::part(label-text-wrapper){margin-block:0}ion-radio.in-item.radio-label-placement-start::part(label-text-wrapper){margin-inline:0 var(--kirby-spacing-xxs)}ion-radio.in-item.radio-label-placement-end::part(label-text-wrapper){margin-inline:var(--kirby-spacing-xxs) 0}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked:not(:focus,.radio-disabled)::part(container){box-shadow:var(--kirby-elevation-4)}ion-radio.radio-checked:not(:focus,:focus-within,.radio-disabled)::part(container){border-color:var(--kirby-semi-dark)}:host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
+            args: [{ selector: 'kirby-radio', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], imports: [IonRadio], template: "<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-radio>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}:host[disabled] ion-radio::part(mark){--color-checked: var(--kirby-semi-dark)}:host[disabled] ion-radio::part(label-text-wrapper){opacity:1}:host[disabled] ion-radio::part(native-wrapper){opacity:1}:host:has(ion-radio.in-item.radio-justify-space-between){width:100%}:host.has-hidden-label:has(ion-radio.in-item){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio{position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio::part(label){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-radio{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.xs ion-radio:not(.in-item)::part(label){padding-block:4px}:host.sm ion-radio:not(.in-item)::part(label){padding-block:10px}:host.md ion-radio:not(.in-item)::part(label){padding-block:16px}ion-radio:focus-within{--border-width: 0;--color: transparent}ion-radio:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-radio{box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media(hover:hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color-checked: rgb(52.6486343612, 207.7113656388, 125.2311894273)}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;background-color:var(--kirby-white);margin:2px;width:20px;height:20px}ion-radio::part(mark){width:12px;height:12px}ion-radio::part(label){align-items:start;padding-inline:16px;line-height:1.5}ion-radio::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}ion-radio::part(native-wrapper){height:1.5rem}ion-radio.in-item::part(label){align-items:center;padding-inline:0}ion-radio.in-item::part(label-text-wrapper){margin-block:0}ion-radio.in-item.radio-label-placement-start::part(label-text-wrapper){margin-inline:0 8px}ion-radio.in-item.radio-label-placement-end::part(label-text-wrapper){margin-inline:8px 0}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked:not(:focus,.radio-disabled)::part(container){box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}ion-radio.radio-checked:not(:focus,:focus-within,.radio-disabled)::part(container){border-color:var(--kirby-semi-dark)}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }], propDecorators: { ionRadioElement: [{
                 type: ViewChild,
                 args: [IonRadio, { read: ElementRef, static: true }]

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-radio.mjs","sources":["../../radio/src/radio.component.ts","../../radio/src/radio.component.html","../../radio/src/radio-group/radio-group.component.ts","../../radio/src/radio-group/radio-group.component.html","../../radio/src/radio-module.ts","../../radio/src/kirbydesign-designsystem-radio.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnInit,\n  ViewChild,\n} from '@angular/core';\nimport { IonRadio } from '@ionic/angular';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  selector: 'kirby-radio',\n  templateUrl: './radio.component.html',\n  styleUrls: ['./radio.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [IonicElementPartHelper],\n  imports: [IonRadio],\n})\nexport class RadioComponent implements AfterViewInit, OnInit, AfterContentInit {\n  @ViewChild(IonRadio, { read: ElementRef, static: true })\n  private ionRadioElement?: ElementRef<HTMLIonRadioElement>;\n\n  @Input()\n  value: any;\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @Input()\n  disabled: boolean;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  get buttonTabIndex(): number {\n    return this.ionRadioElement ? this.ionRadioElement.nativeElement.tabIndex : -1;\n  }\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionRadioElement, '.radio-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionRadioElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart('native-wrapper', this.ionRadioElement, '.native-wrapper');\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  focus() {\n    this.ionRadioElement?.nativeElement.focus();\n  }\n}\n","<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-radio>\n","import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  Output,\n  QueryList,\n  Renderer2,\n  TemplateRef,\n  ViewChildren,\n} from '@angular/core';\nimport { Component, HostListener, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { FORM_FIELD_CONTROL, FormFieldControl } from '@kirbydesign/designsystem/types';\n\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { IonRadioGroup } from '@ionic/angular';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RadioComponent } from '../radio.component';\n\n@Component({\n  selector: 'kirby-radio-group',\n  templateUrl: './radio-group.component.html',\n  styles: ['ion-radio-group { display: inherit; flex-wrap: inherit}'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: RadioGroupComponent,\n      multi: true,\n    },\n    { provide: FORM_FIELD_CONTROL, useExisting: RadioGroupComponent },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonRadioGroup, NgTemplateOutlet, RadioComponent],\n})\nexport class RadioGroupComponent\n  implements AfterContentInit, ControlValueAccessor, FormFieldControl, AfterViewInit\n{\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private element: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  // #region public properties\n\n  get disabled(): boolean {\n    return this._disabled;\n  }\n\n  @Input() set disabled(value: boolean) {\n    this._disabled = value;\n    this.setProjectedRadiosDisabledState(value);\n  }\n\n  private _hasError: boolean = false;\n\n  @HostBinding('class.error')\n  @Input()\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  set hasError(value: boolean) {\n    if (this._hasError !== value) {\n      this._hasError = value;\n      this.hasErrorChange.emit(this._hasError);\n    }\n  }\n\n  @Output() hasErrorChange = new EventEmitter<boolean>();\n\n  get interactiveElement(): HTMLElement {\n    return this.element?.nativeElement?.querySelector('ion-radio-group');\n  }\n\n  get items(): string[] | any[] {\n    return this._items || []; // Ensure items return empty array even if set to null/undefined\n  }\n\n  @Input() set items(value: string[] | any[]) {\n    if ((!value || !value.length) && !this.items.length) return; // Nothing changed, no items before or after\n    this._items = value;\n    this.refreshSelectionState();\n  }\n\n  @Input()\n  itemTextProperty = 'text';\n\n  @Input()\n  itemDisabledProperty = 'disabled';\n\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @Input() set selectedIndex(value: number) {\n    if (typeof value === 'string') value = parseInt(value); // Ensure data type number, e.g. when used with template syntax without binding: <... selectedIndex=\"1\"\n    if (value === undefined || value === null || Number.isNaN(value)) value = -1;\n    if (value === this.selectedIndex) return;\n    this._selectedIndex = value;\n    this._value = this.getValueFromSelectedIndex() || null;\n  }\n\n  get value(): string | any {\n    return this._value;\n  }\n\n  @Input() set value(value: string | any) {\n    this.setSelectedItem(value);\n  }\n\n  private get hasValue(): boolean {\n    return this.value !== undefined && this.value !== null;\n  }\n\n  /**\n   * Emitted when an option is selected\n   */\n  @Output() valueChange: EventEmitter<string | any> = new EventEmitter<string | any>();\n  // #endregion public properties\n\n  // #region \"protected\" properties used by template\n  @ContentChild(ListItemTemplateDirective, { read: TemplateRef })\n  _customItemTemplate: TemplateRef<any>;\n  // #endregion \"protected\" properties used by template\n\n  // #region private fields\n  private _disabled = false;\n  private _items: string[] | any[] = [];\n  private _onChangeCallback: (value: any) => void = () => {};\n  private _onTouched = () => {};\n  private _selectedIndex: number = -1;\n  private _value?: string | any = null;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  @ViewChildren(RadioComponent)\n  private radioButtons: QueryList<RadioComponent>;\n  @ContentChildren(RadioComponent, { descendants: true })\n  private projectedRadioButtons: QueryList<RadioComponent>;\n\n  private get hasItemsFromContentProjection(): boolean {\n    return (\n      !this.items.length &&\n      !this._customItemTemplate &&\n      this.projectedRadioButtons &&\n      this.projectedRadioButtons.length > 0\n    );\n  }\n\n  // #endregion private fields\n\n  // #region public methods\n  focus() {\n    const findFocusable = (radios: QueryList<RadioComponent>) =>\n      radios && radios.find((radio) => !isNaN(radio.buttonTabIndex) && radio.buttonTabIndex !== -1);\n    const focusable = findFocusable(this.radioButtons) || findFocusable(this.projectedRadioButtons);\n    focusable?.focus();\n  }\n\n  ngAfterContentInit(): void {\n    this.initSelectionStateFromProjectedContent();\n    this.listenForProjectedRadiosChange();\n  }\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.element.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.element.nativeElement.querySelector('ion-radio-group')\n    );\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChangeCallback = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean) {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: any): void {\n    this.value = value;\n    this.cdr.markForCheck();\n  }\n\n  // #endregion public methods\n\n  // #region \"protected\" methods used by template\n  _getTextFromItem(item: string | any): string {\n    if (!item) return null;\n    return typeof item === 'string' ? item : item[this.itemTextProperty];\n  }\n\n  _getDisabledStateFromItem(item: string | any): boolean {\n    if (!item) return undefined;\n    return typeof item === 'string' ? undefined : item[this.itemDisabledProperty];\n  }\n\n  get _hasItems(): boolean {\n    return this.items.length > 0 || this.hasItemsFromContentProjection;\n  }\n\n  _onChange(value: string | any) {\n    if (value === this._value) return;\n    this.setSelectedItem(value);\n    this.valueChange.emit(value);\n    this._onChangeCallback(value);\n  }\n\n  @HostListener('ionBlur')\n  _onRadioBlur() {\n    this._onTouched();\n  }\n\n  // #endregion \"protected\" methods used by template\n\n  // #region private methods\n  private getIndexOfSelectedValue() {\n    if (!this.hasValue) return -1;\n    return this.hasItemsFromContentProjection\n      ? this.getIndexOfProjectedRadio(this.value)\n      : this.items.indexOf(this.value);\n  }\n\n  private getIndexOfProjectedRadio(value: string | any): number {\n    let selectedIndex = -1;\n    this.projectedRadioButtons?.find((radio, i) => {\n      const found = radio.value === value;\n      if (found) {\n        selectedIndex = i;\n      }\n      return found;\n    });\n    return selectedIndex;\n  }\n\n  private getValueFromSelectedIndex(): string | any {\n    if (this.selectedIndex === -1) return;\n    return this.hasItemsFromContentProjection\n      ? this.getValueFromProjectedRadios(this.selectedIndex)\n      : this.items[this.selectedIndex];\n  }\n\n  private getValueFromProjectedRadios(index: number): string | any {\n    const radio =\n      this.projectedRadioButtons &&\n      this.projectedRadioButtons.find((_, i) => {\n        return i === index;\n      });\n    return radio && radio.value;\n  }\n\n  private initSelectionStateFromProjectedContent() {\n    if (this.hasItemsFromContentProjection) {\n      this.refreshSelectionState(); // Initialize selected index and value from projected radios\n    }\n  }\n\n  private listenForProjectedRadiosChange() {\n    this.projectedRadioButtons.changes.subscribe(() => {\n      this.refreshStateFromProjectedContent();\n\n      if (this.disabled) {\n        // Ensure disabled state propagates when re-rendering projected radios.\n        // setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when updating the DOM in QueryList.changes:\n        setTimeout(() => this.setProjectedRadiosDisabledState(this.disabled));\n      }\n    });\n  }\n\n  private refreshSelectionState() {\n    if (this.hasValue) {\n      this._selectedIndex = this.getIndexOfSelectedValue(); // Ensure selectedIndex reflects value within items\n    }\n\n    const valueFromSelectedIndex = this.getValueFromSelectedIndex();\n    this._value = valueFromSelectedIndex !== undefined ? valueFromSelectedIndex : null;\n  }\n\n  private refreshStateFromProjectedContent() {\n    if (this._customItemTemplate) return; // Only refresh on changes to projected content, not when re-rendering custom template\n    this.cdr.markForCheck(); // Ensure changes to projected content gets checked in next change detection cycle\n    this.refreshSelectionState(); // Sync selected index and value from projected radios\n  }\n\n  private setSelectedItem(value: string | any) {\n    if (value === this._value) return; // Nothing changed\n    this._value = value;\n    this._selectedIndex = this.getIndexOfSelectedValue();\n  }\n\n  private setProjectedRadiosDisabledState(isDisabled: boolean) {\n    if (!this.projectedRadioButtons || !this.projectedRadioButtons.length) return;\n    this.projectedRadioButtons.forEach((radio, index) => {\n      // Disable all radios when group is disabled, otherwise fall back to each item's disabled state, if defined:\n      radio.disabled = isDisabled || this._getDisabledStateFromItem(this.items[index]);\n    });\n  }\n\n  // #endregion private methods\n}\n","@if (_hasItems) {\n  <ion-radio-group\n    [value]=\"value\"\n    (ionChange)=\"_onChange($event.detail.value)\"\n    [attr.aria-invalid]=\"hasError\"\n  >\n    @if (!items || !items.length) {\n      <ng-content></ng-content>\n    } @else {\n      @for (item of items; track _getTextFromItem(item)) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            _customItemTemplate || defaultItemTemplate;\n            context: { $implicit: item, selected: $index === selectedIndex, index: $index }\n          \"\n        ></ng-container>\n      }\n    }\n  </ion-radio-group>\n}\n\n<ng-template #defaultItemTemplate let-item>\n  <kirby-radio\n    [value]=\"item\"\n    [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n    [text]=\"_getTextFromItem(item)\"\n  ></kirby-radio>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IonRadio, IonRadioGroup } from '@ionic/angular';\nimport { RadioGroupComponent } from './radio-group/radio-group.component';\nimport { RadioComponent } from './radio.component';\n\nconst declarations = [RadioComponent, RadioGroupComponent];\n\n@NgModule({\n  imports: [CommonModule, IonRadio, IonRadioGroup, ...declarations],\n  exports: [...declarations],\n})\nexport class RadioModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-radio.mjs","sources":["../../radio/src/radio.component.ts","../../radio/src/radio.component.html","../../radio/src/radio-group/radio-group.component.ts","../../radio/src/radio-group/radio-group.component.html","../../radio/src/radio-module.ts","../../radio/src/kirbydesign-designsystem-radio.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnInit,\n  ViewChild,\n} from '@angular/core';\nimport { IonRadio } from '@ionic/angular/standalone';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  selector: 'kirby-radio',\n  templateUrl: './radio.component.html',\n  styleUrls: ['./radio.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [IonicElementPartHelper],\n  imports: [IonRadio],\n})\nexport class RadioComponent implements AfterViewInit, OnInit, AfterContentInit {\n  @ViewChild(IonRadio, { read: ElementRef, static: true })\n  private ionRadioElement?: ElementRef<HTMLIonRadioElement>;\n\n  @Input()\n  value: any;\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @Input()\n  disabled: boolean;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  get buttonTabIndex(): number {\n    return this.ionRadioElement ? this.ionRadioElement.nativeElement.tabIndex : -1;\n  }\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionRadioElement, '.radio-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionRadioElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart('native-wrapper', this.ionRadioElement, '.native-wrapper');\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  focus() {\n    this.ionRadioElement?.nativeElement.focus();\n  }\n}\n","<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-radio>\n","import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  Output,\n  QueryList,\n  Renderer2,\n  TemplateRef,\n  ViewChildren,\n} from '@angular/core';\nimport { Component, HostListener, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { FORM_FIELD_CONTROL, FormFieldControl } from '@kirbydesign/designsystem/types';\n\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { IonRadioGroup } from '@ionic/angular/standalone';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RadioComponent } from '../radio.component';\n\n@Component({\n  selector: 'kirby-radio-group',\n  templateUrl: './radio-group.component.html',\n  styles: ['ion-radio-group { display: inherit; flex-wrap: inherit}'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: RadioGroupComponent,\n      multi: true,\n    },\n    { provide: FORM_FIELD_CONTROL, useExisting: RadioGroupComponent },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonRadioGroup, NgTemplateOutlet, RadioComponent],\n})\nexport class RadioGroupComponent\n  implements AfterContentInit, ControlValueAccessor, FormFieldControl, AfterViewInit\n{\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private element: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  // #region public properties\n\n  get disabled(): boolean {\n    return this._disabled;\n  }\n\n  @Input() set disabled(value: boolean) {\n    this._disabled = value;\n    this.setProjectedRadiosDisabledState(value);\n  }\n\n  private _hasError: boolean = false;\n\n  @HostBinding('class.error')\n  @Input()\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  set hasError(value: boolean) {\n    if (this._hasError !== value) {\n      this._hasError = value;\n      this.hasErrorChange.emit(this._hasError);\n    }\n  }\n\n  @Output() hasErrorChange = new EventEmitter<boolean>();\n\n  get interactiveElement(): HTMLElement {\n    return this.element?.nativeElement?.querySelector('ion-radio-group');\n  }\n\n  get items(): string[] | any[] {\n    return this._items || []; // Ensure items return empty array even if set to null/undefined\n  }\n\n  @Input() set items(value: string[] | any[]) {\n    if ((!value || !value.length) && !this.items.length) return; // Nothing changed, no items before or after\n    this._items = value;\n    this.refreshSelectionState();\n  }\n\n  @Input()\n  itemTextProperty = 'text';\n\n  @Input()\n  itemDisabledProperty = 'disabled';\n\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @Input() set selectedIndex(value: number) {\n    if (typeof value === 'string') value = parseInt(value); // Ensure data type number, e.g. when used with template syntax without binding: <... selectedIndex=\"1\"\n    if (value === undefined || value === null || Number.isNaN(value)) value = -1;\n    if (value === this.selectedIndex) return;\n    this._selectedIndex = value;\n    this._value = this.getValueFromSelectedIndex() || null;\n  }\n\n  get value(): string | any {\n    return this._value;\n  }\n\n  @Input() set value(value: string | any) {\n    this.setSelectedItem(value);\n  }\n\n  private get hasValue(): boolean {\n    return this.value !== undefined && this.value !== null;\n  }\n\n  /**\n   * Emitted when an option is selected\n   */\n  @Output() valueChange: EventEmitter<string | any> = new EventEmitter<string | any>();\n  // #endregion public properties\n\n  // #region \"protected\" properties used by template\n  @ContentChild(ListItemTemplateDirective, { read: TemplateRef })\n  _customItemTemplate: TemplateRef<any>;\n  // #endregion \"protected\" properties used by template\n\n  // #region private fields\n  private _disabled = false;\n  private _items: string[] | any[] = [];\n  private _onChangeCallback: (value: any) => void = () => {};\n  private _onTouched = () => {};\n  private _selectedIndex: number = -1;\n  private _value?: string | any = null;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  @ViewChildren(RadioComponent)\n  private radioButtons: QueryList<RadioComponent>;\n  @ContentChildren(RadioComponent, { descendants: true })\n  private projectedRadioButtons: QueryList<RadioComponent>;\n\n  private get hasItemsFromContentProjection(): boolean {\n    return (\n      !this.items.length &&\n      !this._customItemTemplate &&\n      this.projectedRadioButtons &&\n      this.projectedRadioButtons.length > 0\n    );\n  }\n\n  // #endregion private fields\n\n  // #region public methods\n  focus() {\n    const findFocusable = (radios: QueryList<RadioComponent>) =>\n      radios && radios.find((radio) => !isNaN(radio.buttonTabIndex) && radio.buttonTabIndex !== -1);\n    const focusable = findFocusable(this.radioButtons) || findFocusable(this.projectedRadioButtons);\n    focusable?.focus();\n  }\n\n  ngAfterContentInit(): void {\n    this.initSelectionStateFromProjectedContent();\n    this.listenForProjectedRadiosChange();\n  }\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.element.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.element.nativeElement.querySelector('ion-radio-group')\n    );\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChangeCallback = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean) {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: any): void {\n    this.value = value;\n    this.cdr.markForCheck();\n  }\n\n  // #endregion public methods\n\n  // #region \"protected\" methods used by template\n  _getTextFromItem(item: string | any): string {\n    if (!item) return null;\n    return typeof item === 'string' ? item : item[this.itemTextProperty];\n  }\n\n  _getDisabledStateFromItem(item: string | any): boolean {\n    if (!item) return undefined;\n    return typeof item === 'string' ? undefined : item[this.itemDisabledProperty];\n  }\n\n  get _hasItems(): boolean {\n    return this.items.length > 0 || this.hasItemsFromContentProjection;\n  }\n\n  _onChange(value: string | any) {\n    if (value === this._value) return;\n    this.setSelectedItem(value);\n    this.valueChange.emit(value);\n    this._onChangeCallback(value);\n  }\n\n  @HostListener('ionBlur')\n  _onRadioBlur() {\n    this._onTouched();\n  }\n\n  // #endregion \"protected\" methods used by template\n\n  // #region private methods\n  private getIndexOfSelectedValue() {\n    if (!this.hasValue) return -1;\n    return this.hasItemsFromContentProjection\n      ? this.getIndexOfProjectedRadio(this.value)\n      : this.items.indexOf(this.value);\n  }\n\n  private getIndexOfProjectedRadio(value: string | any): number {\n    let selectedIndex = -1;\n    this.projectedRadioButtons?.find((radio, i) => {\n      const found = radio.value === value;\n      if (found) {\n        selectedIndex = i;\n      }\n      return found;\n    });\n    return selectedIndex;\n  }\n\n  private getValueFromSelectedIndex(): string | any {\n    if (this.selectedIndex === -1) return;\n    return this.hasItemsFromContentProjection\n      ? this.getValueFromProjectedRadios(this.selectedIndex)\n      : this.items[this.selectedIndex];\n  }\n\n  private getValueFromProjectedRadios(index: number): string | any {\n    const radio =\n      this.projectedRadioButtons &&\n      this.projectedRadioButtons.find((_, i) => {\n        return i === index;\n      });\n    return radio && radio.value;\n  }\n\n  private initSelectionStateFromProjectedContent() {\n    if (this.hasItemsFromContentProjection) {\n      this.refreshSelectionState(); // Initialize selected index and value from projected radios\n    }\n  }\n\n  private listenForProjectedRadiosChange() {\n    this.projectedRadioButtons.changes.subscribe(() => {\n      this.refreshStateFromProjectedContent();\n\n      if (this.disabled) {\n        // Ensure disabled state propagates when re-rendering projected radios.\n        // setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when updating the DOM in QueryList.changes:\n        setTimeout(() => this.setProjectedRadiosDisabledState(this.disabled));\n      }\n    });\n  }\n\n  private refreshSelectionState() {\n    if (this.hasValue) {\n      this._selectedIndex = this.getIndexOfSelectedValue(); // Ensure selectedIndex reflects value within items\n    }\n\n    const valueFromSelectedIndex = this.getValueFromSelectedIndex();\n    this._value = valueFromSelectedIndex !== undefined ? valueFromSelectedIndex : null;\n  }\n\n  private refreshStateFromProjectedContent() {\n    if (this._customItemTemplate) return; // Only refresh on changes to projected content, not when re-rendering custom template\n    this.cdr.markForCheck(); // Ensure changes to projected content gets checked in next change detection cycle\n    this.refreshSelectionState(); // Sync selected index and value from projected radios\n  }\n\n  private setSelectedItem(value: string | any) {\n    if (value === this._value) return; // Nothing changed\n    this._value = value;\n    this._selectedIndex = this.getIndexOfSelectedValue();\n  }\n\n  private setProjectedRadiosDisabledState(isDisabled: boolean) {\n    if (!this.projectedRadioButtons || !this.projectedRadioButtons.length) return;\n    this.projectedRadioButtons.forEach((radio, index) => {\n      // Disable all radios when group is disabled, otherwise fall back to each item's disabled state, if defined:\n      radio.disabled = isDisabled || this._getDisabledStateFromItem(this.items[index]);\n    });\n  }\n\n  // #endregion private methods\n}\n","@if (_hasItems) {\n  <ion-radio-group\n    [value]=\"value\"\n    (ionChange)=\"_onChange($event.detail.value)\"\n    [attr.aria-invalid]=\"hasError\"\n  >\n    @if (!items || !items.length) {\n      <ng-content></ng-content>\n    } @else {\n      @for (item of items; track _getTextFromItem(item)) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            _customItemTemplate || defaultItemTemplate;\n            context: { $implicit: item, selected: $index === selectedIndex, index: $index }\n          \"\n        ></ng-container>\n      }\n    }\n  </ion-radio-group>\n}\n\n<ng-template #defaultItemTemplate let-item>\n  <kirby-radio\n    [value]=\"item\"\n    [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n    [text]=\"_getTextFromItem(item)\"\n  ></kirby-radio>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';\nimport { RadioGroupComponent } from './radio-group/radio-group.component';\nimport { RadioComponent } from './radio.component';\n\nconst declarations = [RadioComponent, RadioGroupComponent];\n\n@NgModule({\n  imports: [CommonModule, IonRadio, IonRadioGroup, ...declarations],\n  exports: [...declarations],\n})\nexport class RadioModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-range.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, forwardRef, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { IonRange } from '@ionic/angular';
+import { IonRange } from '@ionic/angular/standalone';
 import { forwardAttributes } from '@kirbydesign/designsystem/shared';
 
 class RangeComponent {
@@ -101,7 +101,7 @@ class RangeComponent {
                 multi: true,
                 useExisting: forwardRef((() => RangeComponent)),
             },
-        ], viewQueries: [{ propertyName: "ionRange", first: true, predicate: IonRange, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range:focus-visible::part(knob){transition:all 80ms linear 0ms;box-shadow:0 5px 10px #1c1c1c4d,0 0 5px #1c1c1c14,var(--kirby-focus-ring-md-inset)}@media(hover:hover){ion-range:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--knob-background: rgb(234.6, 234.6, 234.6)}}ion-range:active,ion-range.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--knob-background: rgb(214.2, 214.2, 214.2)}ion-range{--knob-background: var(--kirby-white);--knob-box-shadow: 0 5px 10px 0 rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--knob-size: 24px;--pin-color: var(--kirby-text-color-black);--pin-background: var(--kirby-semi-light);--bar-background: var(--kirby-medium);--bar-background-active: var(--kirby-dark);--bar-border-radius: var(--kirby-spacing-xxxs);--bar-height: var(--kirby-spacing-xxxxs);flex:1 1 100%;padding:0}ion-range.range-disabled{--knob-background: var(--kirby-medium);--knob-box-shadow: none;--bar-background: var(--kirby-semi-light);--bar-background-active: var(--kirby-medium)}ion-range.range-disabled::part(tick){background:var(--kirby-semi-light)}ion-range.range-has-pin{padding:0 3px}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background}ion-range::part(pin){font-size:var(--kirby-font-size-xs);color:var(--pin-color);background-color:var(--pin-background);padding:var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs);border-radius:var(--kirby-spacing-xxxs);min-width:var(--kirby-spacing-m);top:calc(-1 * var(--kirby-spacing-xxs))}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:var(--kirby-border-radius-circle);width:6px;height:6px;margin-top:1px;z-index:1;margin-inline-start:-3px}ion-range::part(tick){background:var(--kirby-medium)}label{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs);color:var(--kirby-text-color-semi-dark);margin-top:calc(-1 * var(--kirby-spacing-xxxs))}\n"], dependencies: [{ kind: "component", type: IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "label", "labelPlacement", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ionRange", first: true, predicate: IonRange, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range:focus-visible::part(knob){transition:all 80ms linear 0ms;box-shadow:0 5px 10px #1c1c1c4d,0 0 5px #1c1c1c14,var(--kirby-focus-ring-md-inset)}@media(hover:hover){ion-range:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--knob-background: rgb(234.6, 234.6, 234.6)}}ion-range:active,ion-range.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--knob-background: rgb(214.2, 214.2, 214.2)}ion-range{--knob-background: var(--kirby-white);--knob-box-shadow: 0 5px 10px 0 rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--knob-size: 24px;--pin-color: var(--kirby-text-color-black);--pin-background: var(--kirby-semi-light);--bar-background: var(--kirby-medium);--bar-background-active: var(--kirby-dark);--bar-border-radius: 4px;--bar-height: 2px;flex:1 1 100%;padding:0}ion-range.range-disabled{--knob-background: var(--kirby-medium);--knob-box-shadow: none;--bar-background: var(--kirby-semi-light);--bar-background-active: var(--kirby-medium)}ion-range.range-disabled::part(tick){background:var(--kirby-semi-light)}ion-range.range-has-pin{padding:0 3px}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background}ion-range::part(pin){font-size:clamp(11px,.75rem,24px);color:var(--pin-color);background-color:var(--pin-background);padding:2px 8px;border-radius:4px;min-width:24px;top:-12px}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:50%;width:6px;height:6px;margin-top:1px;z-index:1;margin-inline-start:-3px}ion-range::part(tick){background:var(--kirby-medium)}label{font-size:clamp(11px,.75rem,24px);line-height:1.3334;color:var(--kirby-text-color-semi-dark);margin-top:-4px}\n"], dependencies: [{ kind: "component", type: IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "label", "labelPlacement", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RangeComponent, decorators: [{
             type: Component,
@@ -111,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             multi: true,
                             useExisting: forwardRef((() => RangeComponent)),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range:focus-visible::part(knob){transition:all 80ms linear 0ms;box-shadow:0 5px 10px #1c1c1c4d,0 0 5px #1c1c1c14,var(--kirby-focus-ring-md-inset)}@media(hover:hover){ion-range:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--knob-background: rgb(234.6, 234.6, 234.6)}}ion-range:active,ion-range.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--knob-background: rgb(214.2, 214.2, 214.2)}ion-range{--knob-background: var(--kirby-white);--knob-box-shadow: 0 5px 10px 0 rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--knob-size: 24px;--pin-color: var(--kirby-text-color-black);--pin-background: var(--kirby-semi-light);--bar-background: var(--kirby-medium);--bar-background-active: var(--kirby-dark);--bar-border-radius: var(--kirby-spacing-xxxs);--bar-height: var(--kirby-spacing-xxxxs);flex:1 1 100%;padding:0}ion-range.range-disabled{--knob-background: var(--kirby-medium);--knob-box-shadow: none;--bar-background: var(--kirby-semi-light);--bar-background-active: var(--kirby-medium)}ion-range.range-disabled::part(tick){background:var(--kirby-semi-light)}ion-range.range-has-pin{padding:0 3px}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background}ion-range::part(pin){font-size:var(--kirby-font-size-xs);color:var(--pin-color);background-color:var(--pin-background);padding:var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs);border-radius:var(--kirby-spacing-xxxs);min-width:var(--kirby-spacing-m);top:calc(-1 * var(--kirby-spacing-xxs))}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:var(--kirby-border-radius-circle);width:6px;height:6px;margin-top:1px;z-index:1;margin-inline-start:-3px}ion-range::part(tick){background:var(--kirby-medium)}label{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs);color:var(--kirby-text-color-semi-dark);margin-top:calc(-1 * var(--kirby-spacing-xxxs))}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range:focus-visible::part(knob){transition:all 80ms linear 0ms;box-shadow:0 5px 10px #1c1c1c4d,0 0 5px #1c1c1c14,var(--kirby-focus-ring-md-inset)}@media(hover:hover){ion-range:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--knob-background: rgb(234.6, 234.6, 234.6)}}ion-range:active,ion-range.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--knob-background: rgb(214.2, 214.2, 214.2)}ion-range{--knob-background: var(--kirby-white);--knob-box-shadow: 0 5px 10px 0 rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--knob-size: 24px;--pin-color: var(--kirby-text-color-black);--pin-background: var(--kirby-semi-light);--bar-background: var(--kirby-medium);--bar-background-active: var(--kirby-dark);--bar-border-radius: 4px;--bar-height: 2px;flex:1 1 100%;padding:0}ion-range.range-disabled{--knob-background: var(--kirby-medium);--knob-box-shadow: none;--bar-background: var(--kirby-semi-light);--bar-background-active: var(--kirby-medium)}ion-range.range-disabled::part(tick){background:var(--kirby-semi-light)}ion-range.range-has-pin{padding:0 3px}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background}ion-range::part(pin){font-size:clamp(11px,.75rem,24px);color:var(--pin-color);background-color:var(--pin-background);padding:2px 8px;border-radius:4px;min-width:24px;top:-12px}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:50%;width:6px;height:6px;margin-top:1px;z-index:1;margin-inline-start:-3px}ion-range::part(tick){background:var(--kirby-medium)}label{font-size:clamp(11px,.75rem,24px);line-height:1.3334;color:var(--kirby-text-color-semi-dark);margin-top:-4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { minLabel: [{
                 type: Input
             }], maxLabel: [{