@kirbydesign/extensions-angular 3.3.0 → 3.5.0

package/assets/spot-illustrations/money.none.coin.bars.medium.svg

@@ -0,0 +1,16 @@
+<svg width="56" height="56" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path
+        part="highlight" fill="cadetblue"
+
+     d="M34.48,28.53c-3.24,0-5.81,1.08-6.01,2.12,0,.04.01.08.01.12v.19c.28,1.02,2.82,2.06,6,2.06s5.87-1.11,6.06-2.15v-.11s0-.08,0-.08v-.02c-.15-1.04-2.77-2.14-6.07-2.14Z"
+      />
+  <path
+        part="background" fill="silver"
+
+     d="M 42.730469 5 C 41.070469 5 39.730469 6.34 39.730469 8 L 39.730469 28.019531 C 41.150469 28.669531 42.050781 29.619766 42.050781 30.759766 C 42.050781 30.839766 42.049063 30.910469 42.039062 30.980469 L 41.890625 47.859375 C 42.160625 47.939375 42.430469 47.990234 42.730469 47.990234 L 52 47.990234 C 53.66 47.990234 55 46.650234 55 44.990234 L 55 8 C 55 6.34 53.66 5 52 5 L 42.730469 5 z M 23.369141 14.990234 C 21.709141 14.990234 20.369141 16.330234 20.369141 17.990234 L 20.369141 36.279297 C 20.625777 36.269426 20.893651 36.260019 21.160156 36.259766 L 21.169922 36.259766 C 23.536158 36.2612 25.671548 36.802148 27.009766 37.710938 L 26.980469 31.109375 C 26.960469 30.999375 26.949219 30.889531 26.949219 30.769531 C 26.949219 28.529531 30.370469 27.019531 34.480469 27.019531 C 34.870469 27.019531 35.260625 27.040547 35.640625 27.060547 L 35.640625 17.990234 C 35.640625 16.330234 34.300625 14.990234 32.640625 14.990234 L 23.369141 14.990234 z M 4 25 C 2.34 25 1 26.34 1 28 L 1 45 C 1 46.66 2.34 48 4 48 L 13.269531 48 C 13.509531 48 13.740938 47.960156 13.960938 47.910156 L 13.919922 39.990234 L 13.929688 39.990234 C 13.929688 39.940234 13.929453 39.889844 13.939453 39.839844 C 14.019453 38.749844 14.909531 37.840937 16.269531 37.210938 L 16.269531 28 C 16.269531 26.34 14.929531 25 13.269531 25 L 4 25 z " />
+  <path
+        part="outline" fill="black"
+
+     d="M34.48,27.03c4.13,0,7.57,1.5,7.57,3.73,0,.08,0,.15-.01.22l-.15,17.27v.03s0,.03,0,.04v-.07c0,.05,0,.1-.01.15,0,0,0,0,0,.01h0s0,.04-.01.06v-.06c-.38,1.73-3.41,3.26-6.84,3.34-2.9.07-5.6-.64-7.02-1.82-1.58,1.29-3.78,1.98-6.76,1.98-3.14,0-5.08-.66-6.97-2.16-.21-.17-.3-.42-.28-.66,0-.03,0-.06,0-.1l-.04-9c0-.05,0-.1.01-.15.16-2.13,3.38-3.58,7.22-3.58,2.37,0,4.51.54,5.85,1.45l-.03-6.6c-.02-.11-.03-.22-.03-.34,0-2.24,3.42-3.75,7.53-3.75ZM21.23,47.91c-2.48,0-4.22-.41-5.77-1.33v2.21c1.54,1.14,3.13,1.62,5.77,1.62s4.56-.6,5.86-1.68v-.04s-.02-.04-.02-.06l.02.1s-.02-.09-.02-.13c0-.02,0-.03,0-.05v-1.97c-1.49.87-3.4,1.33-5.83,1.33ZM28.55,45.62v2.74c.65,1.05,3.39,1.96,6.43,1.89,2.76-.06,5.12-1.22,5.41-2.12l.02-2.47c-1.49.9-3.43,1.38-5.92,1.38s-4.35-.44-5.94-1.43ZM21.16,43.76c-2.31,0-4.39-.52-5.73-1.4v2.41c1.55,1.15,3.14,1.64,5.79,1.64s4.52-.59,5.81-1.64v-2.5c-1.35.93-3.5,1.49-5.88,1.49ZM28.53,41.04v2.74s.14.1.14.1c1.55,1.17,3.15,1.67,5.83,1.67s4.64-.62,5.94-1.74l.02-2.73c-1.5.92-3.45,1.41-5.96,1.41s-4.36-.45-5.97-1.45ZM21.16,37.76c-3.21,0-5.73,1.16-5.73,2.25s2.52,2.25,5.73,2.25,5.77-1.19,5.77-2.27-2.54-2.23-5.77-2.23ZM28.51,37.03v2.17s.16.12.16.12c1.55,1.17,3.15,1.67,5.83,1.67s4.68-.64,5.98-1.78l.02-2.15c-1.5.93-3.47,1.43-5.99,1.43s-4.38-.45-5.99-1.46ZM40.52,33.09c-1.39.91-3.6,1.44-6.04,1.44s-4.61-.53-5.99-1.42v2.07s.18.13.18.13c1.55,1.17,3.15,1.67,5.83,1.67s4.71-.65,6.01-1.81h0s.02-2.09.02-2.09ZM34.48,28.53c-3.24,0-5.81,1.08-6.01,2.12,0,.04.01.08.01.12v.19c.28,1.02,2.82,2.06,6,2.06s5.87-1.11,6.06-2.15v-.11s0-.08,0-.08v-.02c-.15-1.04-2.77-2.14-6.07-2.14Z" />
+</svg>

package/assets/spot-illustrations/piggy-bank.money.money-dot.bars.medium.svg

@@ -0,0 +1,8 @@
+<svg width="56" height="56" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path part="background" fill="silver"
+        d="M43.6 6.01a3 3 0 0 0-3 3v38a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-38a3 3 0 0 0-3-3h-8zm-7.383 10.83a2.58 2.58 0 0 1-1.028 1.603l-.76.55.454.614a2.579 2.579 0 0 1-.578 3.616l-5.961 4.302c1.759 1.915 2.734 4.687 2.734 7.965 0 3.951-2.1 6.533-3.61 7.877-.964.86-1.509.793-1.509 2.076v1.807a1.86 1.86 0 0 1-1.678 1.85 3 3 0 0 0 2.157.92h8a3 3 0 0 0 3-3V19.254a3 3 0 0 0-1.221-2.414z" />
+    <path part="outline" fill="black"
+        d="M29.125 8.338a3.591 3.591 0 0 0-2.014.644l-2.433 1.672a.75.75 0 0 0 .851 1.237l2.434-1.674a2.09 2.09 0 0 1 2.924.537l1.297 1.695 2.379 3.229c.605.827.596 1.67-.006 2.222L33.1 15.924l-1.278-1.67c-1.089-1.618-3.354-2.038-4.996-.897L14.453 21.86c-.632-.886-.446-2.025.377-2.619l1.742-1.197a.75.75 0 0 0-.85-1.236l-1.755 1.207a3.33 3.33 0 0 0-.76 4.674l.04.07a3.327 3.327 0 0 0-.323 4.305l4.021 5.5c.226.308.495.566.793.773h-3.984a.75.75 0 0 0 0 1.5h9.455a.75.75 0 0 0 0-1.5h-1.637l.057-.037 13.113-9.469a3.33 3.33 0 0 0 .746-4.666l-.039-.053c1.318-1.085 1.395-2.856.322-4.32l-2.388-3.242-1.28-1.67c-.68-1.011-1.818-1.554-2.978-1.541zm-5.82 3.404a.743.743 0 0 0-.416.135l-1.47 1.021a.749.749 0 1 0 .858 1.23l1.467-1.02a.749.749 0 0 0-.44-1.366zm-3.223 2.219a.749.749 0 0 0-.418.135l-1.705 1.187-.096.067-.271.19a.749.749 0 1 0 .855 1.23l.223-.155.098-.068 1.753-1.22a.749.749 0 0 0-.439-1.366zm8.773.254a2.077 2.077 0 0 1 1.749.914l1.296 1.695 2.38 3.229a1.826 1.826 0 0 1-.415 2.56L20.75 32.082c-.83.6-1.992.418-2.594-.404l-4.021-5.5-.088-.133a1.829 1.829 0 0 1 .375-2.334l.115-.092 13.143-9.027c.36-.25.77-.373 1.175-.377zM7.854 22.182c-1.281-.017-2.208 1.334-1.575 2.527 1.03 1.947 1.575 3.65 1.362 3.848-1.225 1.133-1.99 2.038-2.272 2.986a1.934 1.934 0 0 1-1.281 1.309l-1.18.365a2.14 2.14 0 0 0-1.51 2.043v2.963l.006.156a2.297 2.297 0 0 0 2.291 2.13h1.393l.039.132c.073.236.164.502.273.793a9.11 9.11 0 0 0 1.137 2.322l.152.215c.882 1.197 1.998 1.999 3.36 2.213l.033.004.139 2.345.04.201a2.43 2.43 0 0 0 2.3 1.633h2.865a2.016 2.016 0 0 0 2.011-2.021v-.635c0-.567.454-1.023 1.01-1.023.555 0 1.008.456 1.008 1.023a2.649 2.649 0 0 0 2.639 2.656h1.883a2.647 2.647 0 0 0 2.638-2.656v-1.846c0-.488.048-.594.28-.781-.066.052.703-.512 1.007-.785 2.368-2.117 3.924-4.984 3.924-8.615 0-1.936-.316-3.731-.935-5.315a.751.751 0 0 0-.973-.426.748.748 0 0 0-.424.971c.549 1.404.832 3.015.832 4.77 0 3.156-1.35 5.642-3.426 7.498a6.817 6.817 0 0 1-.322.263l-.197.15c-.23.175-.436.327-.428.321-.593.478-.838 1.017-.838 1.95v1.845c0 .64-.51 1.156-1.138 1.156h-1.883a1.149 1.149 0 0 1-1.139-1.156 2.516 2.516 0 0 0-2.508-2.523 2.516 2.516 0 0 0-2.51 2.523v.635c0 .29-.23.521-.511.521H12.56l-.12-.008a.929.929 0 0 1-.716-.507l-.014-.03-.168-2.875a.75.75 0 0 0-.75-.705c-1.225 0-2.219-.67-3.02-1.836a7.624 7.624 0 0 1-.95-1.943c-.146-.394-.25-.715-.333-1.008a6.247 6.247 0 0 1-.09-.353.75.75 0 0 0-.734-.592h-1.97a.796.796 0 0 1-.798-.787V35.26a.64.64 0 0 1 .456-.61l1.18-.367a3.43 3.43 0 0 0 2.273-2.314c.175-.592.833-1.369 1.853-2.313 1.033-.959.43-2.843-1.056-5.65-.084-.158.066-.354.28-.32a7.836 7.836 0 0 1 2.063.595.75.75 0 0 0 .623-1.365 9.348 9.348 0 0 0-2.455-.713 1.863 1.863 0 0 0-.261-.021z" />
+    <circle part="highlight" fill="cadetblue" cx="24.143" cy="23.114" r="3.5" />
+</svg>

package/assets/spot-illustrations/plant.bars.leaf.bars.medium.svg

@@ -0,0 +1,9 @@
+<svg width="56" height="56" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path part="background" fill="silver"
+    d="M 38.650391 17 C 38.930391 17.88 38.900391 18.860547 38.650391 19.560547 L 38.669922 19.589844 C 38.759922 19.709844 38.849453 19.850234 38.939453 19.990234 C 39.349453 20.600234 39.760625 21.280469 40.140625 21.980469 C 40.440625 22.540469 40.709219 23.090625 40.949219 23.640625 C 41.159219 22.570625 41.430234 21.619766 41.740234 20.759766 C 42.030234 19.969766 42.319844 19.349141 42.589844 18.869141 C 42.399844 18.749141 42.209531 18.64 42.019531 18.5 C 41.739531 18.3 41.270078 17.76 40.830078 17 L 38.650391 17 z M 37.099609 17.160156 C 35.889609 17.550156 35.009766 18.669766 35.009766 20.009766 L 35 20 L 35 20.779297 C 35.69 20.819297 36.389922 20.370469 37.169922 19.230469 C 37.389922 18.900469 37.449609 17.860156 37.099609 17.160156 z M 43.900391 19.619141 C 43.650391 20.069141 43.400391 20.609531 43.150391 21.269531 C 42.540391 22.949531 42.099922 25.070938 41.919922 27.710938 L 41.919922 27.740234 L 41.919922 47.009766 C 41.919922 47.419766 41.579922 47.759766 41.169922 47.759766 C 40.759922 47.759766 40.419922 47.419766 40.419922 47.009766 L 40.419922 27.710938 L 40.419922 27.660156 C 40.419922 27.130156 40.330391 26.529141 40.150391 25.869141 C 39.880391 24.879141 39.410312 23.799219 38.820312 22.699219 C 38.480312 22.069219 38.11 21.470156 37.75 20.910156 C 36.89 21.860156 35.96 22.319063 35 22.289062 L 35 48 C 35 49.66 36.34 51 38 51 L 45 51 C 46.66 51 48 49.66 48 48 L 48 20.529297 C 46.83 20.669297 45.480391 20.409141 43.900391 19.619141 z M 21 25 C 19.34 25 18 26.34 18 28 L 18 48 C 18 49.66 19.34 51 21 51 L 28 51 C 29.66 51 31 49.66 31 48 L 31 28 C 31 26.34 29.66 25 28 25 L 21 25 z M 24.5 28.25 C 24.91 28.25 25.25 28.59 25.25 29 L 25.25 47 C 25.25 47.41 24.91 47.75 24.5 47.75 C 24.09 47.75 23.75 47.41 23.75 47 L 23.75 29 C 23.75 28.59 24.09 28.25 24.5 28.25 z M 4 33 C 2.34 33 1 34.34 1 36 L 1 48 C 1 49.66 2.34 51 4 51 L 11 51 C 12.66 51 14 49.66 14 48 L 14 36 C 14 34.34 12.66 33 11 33 L 4 33 z M 7.5 36.25 C 7.91 36.25 8.25 36.59 8.25 37 L 8.25 47 C 8.25 47.41 7.91 47.75 7.5 47.75 C 7.09 47.75 6.75 47.41 6.75 47 L 6.75 37 C 6.75 36.59 7.09 36.25 7.5 36.25 z " />
+  <path part="outline" fill="black"
+    d="M38.21,16.1c.71,1.01.77,2.5.44,3.46l-.08-.11.09.13c.09.12.18.26.27.4.41.61.82,1.29,1.2,1.99.3.56.57,1.11.81,1.66.21-1.07.48-2.02.79-2.88.54-1.5,1.11-2.42,1.52-2.86.28-.3.76-.32,1.06-.04.3.28.32.76.04,1.06-.05.06-.17.21-.34.48-.29.48-.59,1.1-.87,1.87-.61,1.68-1.05,3.8-1.23,6.44,0,0,0,.02,0,.03v19.27c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-19.3s0-.05,0-.05c0-.53-.09-1.13-.27-1.79-.27-.99-.74-2.07-1.33-3.17-.34-.63-.71-1.23-1.07-1.79-1.14,1.26-2.41,1.66-3.71,1.2-1.15-.41-2.18-1.44-3.13-2.9-.41-.63-.78-1.3-1.11-1.97-.11-.23-.21-.45-.3-.65-.05-.12-.09-.21-.11-.26-.16-.41.06-.87.48-1,4.38-1.32,7.11-.97,8.34.78ZM31.28,16.49l-.15.04.02.05c.22.46.47.93.74,1.37l.27.44c.79,1.21,1.61,2.04,2.38,2.31.84.3,1.67-.07,2.62-1.47.24-.36.3-1.58-.18-2.26-.7-1-2.49-1.31-5.71-.48ZM46.09,13.4c.37.19.51.64.32,1.01-.23.44-.43.89-.6,1.35-.14.39-.58.59-.96.44-.39-.14-.59-.58-.44-.96.19-.52.42-1.03.68-1.53.19-.37.64-.51,1.01-.32ZM50.85,7.89c.36-.2.82-.06,1.02.3.2.36.06.82-.3,1.02-.43.23-.85.49-1.26.78-.4.28-.79.59-1.16.93-.37.33-.72.68-1.05,1.06-.27.31-.75.34-1.06.07-.31-.27-.34-.75-.07-1.06.37-.42.76-.81,1.17-1.18.42-.37.85-.72,1.3-1.03.46-.32.93-.61,1.41-.88ZM24.5,28.25c.41,0,.75.34.75.75v18c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-18c0-.41.34-.75.75-.75ZM7.5,36.25c.41,0,.75.34.75.75v10c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-10c0-.41.34-.75.75-.75Z" />
+  <path part="highlight" fill="cadetblue"
+    d="M52.5,5.02c-18.36,2.37-11.94,12.47-10.48,13.48.19.13.38.25.57.37.24-.43.47-.76.67-.97.28-.3.76-.32,1.06-.04.3.28.32.76.04,1.06-.05.06-.17.21-.34.48-.04.07-.08.15-.13.22,8.49,4.25,10.58-6.89,11.09-12.21.13-1.41-1.09-2.56-2.49-2.38ZM46.41,14.41c-.23.44-.43.89-.6,1.35-.14.39-.58.59-.96.44s-.59-.58-.44-.96c.19-.52.42-1.03.68-1.53.19-.37.64-.51,1.01-.32.37.19.51.64.32,1.01ZM51.56,9.21c-.43.23-.85.49-1.26.78-.4.28-.79.59-1.16.93-.37.33-.72.68-1.05,1.06-.27.31-.75.34-1.06.07-.31-.27-.34-.75-.07-1.06.37-.42.76-.81,1.17-1.18.42-.37.85-.72,1.3-1.03.46-.32.93-.61,1.41-.88.36-.2.82-.06,1.02.3.2.36.06.82-.3,1.02Z" />
+</svg>

package/assets/spot-illustrations/robot.none.antenna-dot.body.large.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <circle part="highlight" fill="cadetblue" cx="48.919" cy="8.8" r="5.394" />
+    <path part="background" fill="silver"
+        d="M79.666 70.072a8.633 8.633 0 0 1-8.09 5.62H26.262a8.634 8.634 0 0 1-8.078-5.587A12.298 12.298 0 0 0 9.97 81.732v1.944A12.297 12.297 0 0 0 22.295 96H75.65a12.297 12.297 0 0 0 12.325-12.324v-1.944c0-5.42-3.465-10.001-8.309-11.66z" />
+    <path part="outline" fill="black"
+        d="M54.834.123a1.001 1.001 0 0 0-.541 1.805 8.171 8.171 0 0 1 3.014 4.248 1 1 0 0 0 1.92-.559A10.17 10.17 0 0 0 55.48.318a.995.995 0 0 0-.647-.195zm-5.916 2.203a6.474 6.474 0 0 0-1.078 12.858v7.642H26.262a9.708 9.708 0 0 0-9.71 9.71v9.171A7.551 7.551 0 0 0 9 49.257v1.048a7.553 7.553 0 0 0 7.553 7.552v9.204a9.708 9.708 0 0 0 9.709 9.709h45.314a9.708 9.708 0 0 0 9.71-9.71l.001-9.26a7.552 7.552 0 0 0 6.625-7.495v-1.047c0-3.858-2.89-7.04-6.625-7.496l-.002-9.227a9.708 9.708 0 0 0-9.709-9.709H49.998v-7.642a6.475 6.475 0 0 0-1.08-12.858zm0 2.158a4.315 4.315 0 1 1 .002 8.631 4.315 4.315 0 0 1-.002-8.63zm9.596 4.002a1 1 0 0 0-.97 1.03c.011.358-.141 1.01-.47 1.906-.325.885-.729 1.579-1.207 2.088a1 1 0 0 0 1.457 1.369c.675-.719 1.214-1.643 1.627-2.768.41-1.114.612-1.983.592-2.654a1 1 0 0 0-1.03-.97zM26.262 24.982h45.314a7.551 7.551 0 0 1 7.551 7.553v34.526a7.55 7.55 0 0 1-7.55 7.55H26.261a7.55 7.55 0 0 1-7.551-7.55V32.535a7.551 7.551 0 0 1 7.55-7.553zm12.396 11.75a5.933 5.933 0 1 0 0 11.867 5.933 5.933 0 0 0 0-11.867zm20.5 0a5.933 5.933 0 1 0 0 11.867 5.933 5.933 0 0 0 0-11.867zm-20.5 2.159a3.777 3.777 0 1 1 .002 7.553 3.777 3.777 0 0 1-.002-7.553zm20.5 0a3.777 3.777 0 1 1-.002 7.552 3.777 3.777 0 0 1 .002-7.552zm-42.605 4.972V55.7a5.395 5.395 0 0 1-5.395-5.394v-1.047a5.395 5.395 0 0 1 5.395-5.395zm64.732.08a5.396 5.396 0 0 1 4.47 5.315v1.047a5.396 5.396 0 0 1-4.47 5.314V43.943zM37.588 57.555a1.08 1.08 0 0 0-.508 2.029c3.696 1.99 7.551 2.988 11.555 2.988 3.992 0 8.023-.993 12.084-2.968a1.078 1.078 0 1 0-.944-1.94c-3.775 1.837-7.487 2.75-11.14 2.75-3.642 0-7.148-.908-10.533-2.73a1.07 1.07 0 0 0-.514-.13z" />
+</svg>

package/assets/spot-illustrations/robot.none.antenna-dot.body.medium.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="56"
+   height="56"
+   viewBox="0 0 56 56"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   >
+  <circle
+     part="highlight"
+     fill="cadetblue"
+     cx="28.252018"
+     cy="5.0688362"
+
+     r="3.1504884"
+     />
+  <path
+     part="background"
+     fill="silver"
+     d="m 46.210504,40.856143 a 5.0423,5.0423 0 0 1 -4.725149,3.282489 H 15.018682 a 5.0428841,5.0428841 0 0 1 -4.718139,-3.263214 7.1829266,7.1829266 0 0 0 -4.7975727,6.791013 v 1.135438 a 7.1823426,7.1823426 0 0 0 7.1986967,7.198112 h 31.1632 a 7.1823426,7.1823426 0 0 0 7.198697,-7.198112 v -1.135438 c 0,-3.165674 -2.023812,-5.841311 -4.85306,-6.810288 z"
+     
+      />
+  <path
+     part="outline"
+     fill="black"
+     d="M 31.70681,8.3882569e-4 A 0.58465682,0.58465682 0 0 0 31.390826,1.05509 4.7724584,4.7724584 0 0 1 33.151222,3.5362311 0.58407275,0.58407275 0 0 0 34.272641,3.2097344 5.9400198,5.9400198 0 0 0 32.084121,0.11473292 0.58115238,0.58115238 0 0 0 31.706226,8.3882569e-4 Z M 28.251435,1.287551 a 3.781287,3.781287 0 0 0 -0.62963,7.5100074 V 13.261042 H 15.018682 a 5.6701782,5.6701782 0 0 0 -5.6713447,5.671347 v 5.356531 a 4.4103333,4.4103333 0 0 0 -4.410919,4.409749 v 0.612108 a 4.4115015,4.4115015 0 0 0 4.411502,4.410918 V 39.0975 a 5.6701782,5.6701782 0 0 0 5.6707617,5.670762 h 26.466673 a 5.6701782,5.6701782 0 0 0 5.671347,-5.671346 l 5.84e-4,-5.408514 a 4.4109174,4.4109174 0 0 0 3.869482,-4.377625 v -0.611524 c 0,-2.253353 -1.687971,-4.111872 -3.869482,-4.378209 l -0.0012,-5.389239 A 5.6701782,5.6701782 0 0 0 41.485355,13.261042 H 28.882234 V 8.7975584 A 3.781871,3.781871 0 0 0 28.251435,1.287551 Z m 0,1.260429 a 2.520566,2.520566 0 1 1 0.0012,5.0411318 2.520274,2.520274 0 0 1 -0.0012,-5.0405478 z m 5.604762,2.3374591 a 0.58407275,0.58407275 0 0 0 -0.56655,0.6015949 c 0.0064,0.2090981 -0.08235,0.5899135 -0.274514,1.1132427 -0.189824,0.5169044 -0.425789,0.9222508 -0.704976,1.2195439 a 0.58407275,0.58407275 0 0 0 0.850994,0.7995956 C 33.5554,8.1994679 33.870215,7.6597846 34.111437,7.0027028 34.350907,6.3520458 34.46889,5.8444865 34.457208,5.4525737 A 0.58407275,0.58407275 0 0 0 33.855613,4.8860232 Z M 15.018682,14.520303 h 26.466673 a 4.4103333,4.4103333 0 0 1 4.410333,4.411502 V 39.0975 a 4.4097492,4.4097492 0 0 1 -4.409749,4.409749 H 15.018099 A 4.4097492,4.4097492 0 0 1 10.607766,39.0975 V 18.931805 a 4.4103333,4.4103333 0 0 1 4.409748,-4.411502 z m 7.240167,6.862855 a 3.4655956,3.4655956 0 1 0 0,6.931191 3.4655956,3.4655956 0 0 0 0,-6.931191 z m 11.973491,0 a 3.4655956,3.4655956 0 1 0 0,6.931191 3.4655956,3.4655956 0 0 0 0,-6.931191 z m -11.973491,1.261013 a 2.2060428,2.2060428 0 1 1 0.0012,4.411501 2.2060428,2.2060428 0 0 1 -0.0012,-4.411501 z m 11.973491,0 a 2.2060428,2.2060428 0 1 1 -0.0012,4.410917 2.2060428,2.2060428 0 0 1 0.0012,-4.410917 z m -24.8844187,2.90401 v 6.913669 a 3.1510725,3.1510725 0 0 1 -3.151073,-3.150489 v -0.611524 a 3.1510725,3.1510725 0 0 1 3.151073,-3.151072 z m 37.8081967,0.04673 a 3.1516565,3.1516565 0 0 1 2.610805,3.104347 v 0.611524 A 3.1516565,3.1516565 0 0 1 47.156117,32.41454 Z M 21.633891,33.54531 a 0.63079857,0.63079857 0 0 0 -0.296709,1.185083 c 2.158733,1.162305 4.410333,1.74521 6.748961,1.74521 2.331618,0 4.686015,-0.579985 7.057935,-1.733528 a 0.63006418,0.63006418 0 1 0 -0.551365,-1.133102 c -2.204875,1.072942 -4.372953,1.606201 -6.50657,1.606201 -2.127193,0 -4.174952,-0.530339 -6.152039,-1.594519 a 0.62495784,0.62495784 0 0 0 -0.300213,-0.07593 z"
+   
+      />
+</svg>

package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs

@@ -1,12 +1,10 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, Renderer2, Directive, EventEmitter, Output, HostBinding, Input, Component } from '@angular/core';
-import * as i3 from '@kirbydesign/designsystem/card';
-import { CardModule } from '@kirbydesign/designsystem/card';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import * as i4 from '@kirbydesign/designsystem/icon';
-import { IconModule } from '@kirbydesign/designsystem/icon';
+import { IconComponent } from '@kirbydesign/designsystem/icon';
 import * as i1 from '@kirbydesign/designsystem/shared';
-import { ResizeObserverService } from '@kirbydesign/designsystem/shared';
+import { ResizeObserverService, ThemeColorDirective } from '@kirbydesign/designsystem/shared';
+import { CardComponent } from '@kirbydesign/designsystem/card';
 
 /**
  * @Description Temporary directive to ensure correct scroll position behavior on Safari.
@@ -38,10 +36,10 @@ class ImageBannerHeightDirective {
         this.currentHeight = cardHeight;
         this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ImageBannerHeightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: ImageBannerHeightDirective, isStandalone: true, selector: "[kirbyImageBannerResize]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageBannerHeightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ImageBannerHeightDirective, isStandalone: true, selector: "[kirbyImageBannerResize]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ImageBannerHeightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageBannerHeightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kirbyImageBannerResize]`,
@@ -89,12 +87,12 @@ class ImageBannerComponent {
     onImageError($event) {
         this.imageError.emit($event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ImageBannerComponent, deps: [{ token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", showButtonInNarrowView: "showButtonInNarrowView", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick", imageError: "imageError" }, host: { properties: { "class.show-button-in-narrow-view": "this.showButtonInNarrowView", "class": "this.backgroundBlur" } }, hostDirectives: [{ directive: ImageBannerHeightDirective }], ngImport: i0, template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <div class=\"dismiss\">\n      <button\n        kirby-button\n        size=\"xs\"\n        (click)=\"dismissClicked($event)\"\n        [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        [showIconOnly]=\"true\"\n        [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n", styles: [":host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;flex-direction:column;justify-content:space-between;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;padding:12px 0 8px 8px;overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);clip-path:inset(50%);border:medium;overflow:hidden;white-space:nowrap;padding:0}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:16px;font-weight:700;line-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "directive", type: i1.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"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageBannerComponent, deps: [{ token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", showButtonInNarrowView: "showButtonInNarrowView", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick", imageError: "imageError" }, host: { properties: { "class.show-button-in-narrow-view": "this.showButtonInNarrowView", "class": "this.backgroundBlur" } }, hostDirectives: [{ directive: ImageBannerHeightDirective }], ngImport: i0, template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <div class=\"dismiss\">\n      <button\n        kirby-button\n        size=\"xs\"\n        (click)=\"dismissClicked($event)\"\n        [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        [showIconOnly]=\"true\"\n        [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n", styles: [":host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;flex-direction:column;justify-content:space-between}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content{min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;padding:12px 0 8px 8px;overflow:hidden}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:16px;font-weight:700;line-height:24px}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ImageBannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-x-image-banner', imports: [CardModule, ButtonComponent, IconModule], hostDirectives: [ImageBannerHeightDirective], template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <div class=\"dismiss\">\n      <button\n        kirby-button\n        size=\"xs\"\n        (click)=\"dismissClicked($event)\"\n        [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        [showIconOnly]=\"true\"\n        [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n", styles: [":host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;flex-direction:column;justify-content:space-between;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;padding:12px 0 8px 8px;overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);clip-path:inset(50%);border:medium;overflow:hidden;white-space:nowrap;padding:0}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:16px;font-weight:700;line-height:24px}\n"] }]
+            args: [{ selector: 'kirby-x-image-banner', imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective], hostDirectives: [ImageBannerHeightDirective], template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <div class=\"dismiss\">\n      <button\n        kirby-button\n        size=\"xs\"\n        (click)=\"dismissClicked($event)\"\n        [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        [showIconOnly]=\"true\"\n        [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n", styles: [":host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;flex-direction:column;justify-content:space-between}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content{min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;padding:12px 0 8px 8px;overflow:hidden}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:16px;font-weight:700;line-height:24px}\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslationService }], propDecorators: { title: [{
                 type: Input
             }], imagePath: [{

package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../tmp-esm2022/image-banner/image-banner-height.directive.js","../tmp-esm2022/image-banner/image-banner.component.js","../tmp-esm2022/image-banner/kirbydesign-extensions-angular-image-banner.js"],"sourcesContent":["import { Directive, ElementRef, inject, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\nimport * as i0 from \"@angular/core\";\n/**\n * @Description Temporary directive to ensure correct scroll position behavior on Safari.\n *\n * When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n */\nexport class ImageBannerHeightDirective {\n    constructor() {\n        this.currentHeight = 0;\n        this.host = inject(ElementRef);\n        this.resizeObserverService = inject(ResizeObserverService);\n        this.renderer = inject(Renderer2);\n    }\n    ngOnInit() {\n        this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n    }\n    ngOnDestroy() {\n        this.resizeObserverService.unobserve(this.host);\n    }\n    setCardHeightOnHost(entry) {\n        const hostElement = entry.target;\n        const card = hostElement.querySelector('kirby-card');\n        const cardHeight = card?.getBoundingClientRect().height;\n        if (!hostElement || !cardHeight)\n            return;\n        if (cardHeight === this.currentHeight)\n            return;\n        this.currentHeight = cardHeight;\n        this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.1.2\", ngImport: i0, type: ImageBannerHeightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }\n    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"20.1.2\", type: ImageBannerHeightDirective, isStandalone: true, selector: \"[kirbyImageBannerResize]\", ngImport: i0 }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.1.2\", ngImport: i0, type: ImageBannerHeightDirective, decorators: [{\n            type: Directive,\n            args: [{\n                    selector: `[kirbyImageBannerResize]`,\n                }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtYmFubmVyLWhlaWdodC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9pbWFnZS1iYW5uZXIvc3JjL2ltYWdlLWJhbm5lci1oZWlnaHQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBcUIsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVGLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOztBQUV6RTs7Ozs7R0FLRztBQUlILE1BQU0sT0FBTywwQkFBMEI7SUFIdkM7UUFJVSxrQkFBYSxHQUFXLENBQUMsQ0FBQztRQUMxQixTQUFJLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzFCLDBCQUFxQixHQUFHLE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1FBQ3RELGFBQVEsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7S0FxQnRDO0lBbkJDLFFBQVE7UUFDTixJQUFJLENBQUMscUJBQXFCLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQzVGLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVPLG1CQUFtQixDQUFDLEtBQTBCO1FBQ3BELE1BQU0sV0FBVyxHQUFHLEtBQUssQ0FBQyxNQUFxQixDQUFDO1FBQ2hELE1BQU0sSUFBSSxHQUFHLFdBQVcsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDckQsTUFBTSxVQUFVLEdBQUcsSUFBSSxFQUFFLHFCQUFxQixFQUFFLENBQUMsTUFBTSxDQUFDO1FBRXhELElBQUksQ0FBQyxXQUFXLElBQUksQ0FBQyxVQUFVO1lBQUUsT0FBTztRQUN4QyxJQUFJLFVBQVUsS0FBSyxJQUFJLENBQUMsYUFBYTtZQUFFLE9BQU87UUFFOUMsSUFBSSxDQUFDLGFBQWEsR0FBRyxVQUFVLENBQUM7UUFDaEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLFlBQVksRUFBRSxHQUFHLFVBQVUsSUFBSSxDQUFDLENBQUM7SUFDdkUsQ0FBQzs4R0F4QlUsMEJBQTBCO2tHQUExQiwwQkFBMEI7OzJGQUExQiwwQkFBMEI7a0JBSHRDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDBCQUEwQjtpQkFDckMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIGluamVjdCwgT25EZXN0cm95LCBPbkluaXQsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUmVzaXplT2JzZXJ2ZXJTZXJ2aWNlIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9zaGFyZWQnO1xuXG4vKipcbiAqIEBEZXNjcmlwdGlvbiBUZW1wb3JhcnkgZGlyZWN0aXZlIHRvIGVuc3VyZSBjb3JyZWN0IHNjcm9sbCBwb3NpdGlvbiBiZWhhdmlvciBvbiBTYWZhcmkuXG4gKlxuICogV2hlbiBuYXZpZ2F0aW5nIGJldHdlZW4gc3RhY2tlZCBwYWdlcywgc2Nyb2xsIHBvc2l0aW9uIGlzIG5vdCBjb3JyZWN0bHkgcmVzdG9yZWQgb24gU2FmYXJpLFxuICogd2hlbiB0aGUgbmVzdGVkIGtpcmJ5LWNhcmQgZWxlbWVudCB1c2VzIGNvbnRhaW5tZW50IGFuZCB0aGUgaG9zdCBlbGVtZW50IGRvZXMgbm90IGhhdmUgYW4gZXhwbGljaXQgaGVpZ2h0LlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6IGBba2lyYnlJbWFnZUJhbm5lclJlc2l6ZV1gLFxufSlcbmV4cG9ydCBjbGFzcyBJbWFnZUJhbm5lckhlaWdodERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBjdXJyZW50SGVpZ2h0OiBudW1iZXIgPSAwO1xuICBwcml2YXRlIGhvc3QgPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHByaXZhdGUgcmVzaXplT2JzZXJ2ZXJTZXJ2aWNlID0gaW5qZWN0KFJlc2l6ZU9ic2VydmVyU2VydmljZSk7XG4gIHByaXZhdGUgcmVuZGVyZXIgPSBpbmplY3QoUmVuZGVyZXIyKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnJlc2l6ZU9ic2VydmVyU2VydmljZS5vYnNlcnZlKHRoaXMuaG9zdCwgKGVudHJ5KSA9PiB0aGlzLnNldENhcmRIZWlnaHRPbkhvc3QoZW50cnkpKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXJTZXJ2aWNlLnVub2JzZXJ2ZSh0aGlzLmhvc3QpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRDYXJkSGVpZ2h0T25Ib3N0KGVudHJ5OiBSZXNpemVPYnNlcnZlckVudHJ5KSB7XG4gICAgY29uc3QgaG9zdEVsZW1lbnQgPSBlbnRyeS50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgY29uc3QgY2FyZCA9IGhvc3RFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJ2tpcmJ5LWNhcmQnKTtcbiAgICBjb25zdCBjYXJkSGVpZ2h0ID0gY2FyZD8uZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuaGVpZ2h0O1xuXG4gICAgaWYgKCFob3N0RWxlbWVudCB8fCAhY2FyZEhlaWdodCkgcmV0dXJuO1xuICAgIGlmIChjYXJkSGVpZ2h0ID09PSB0aGlzLmN1cnJlbnRIZWlnaHQpIHJldHVybjtcblxuICAgIHRoaXMuY3VycmVudEhlaWdodCA9IGNhcmRIZWlnaHQ7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShob3N0RWxlbWVudCwgJ21pbi1oZWlnaHQnLCBgJHtjYXJkSGVpZ2h0fXB4YCk7XG4gIH1cbn1cbiJdfQ==","import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { CardModule } from '@kirbydesign/designsystem/card';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\nimport * as i0 from \"@angular/core\";\nimport * as i1 from \"@kirbydesign/designsystem/shared\";\nimport * as i2 from \"./image-banner-height.directive\";\nimport * as i3 from \"@kirbydesign/designsystem/card\";\nimport * as i4 from \"@kirbydesign/designsystem/icon\";\nexport class ImageBannerComponent {\n    constructor(translations) {\n        this.translations = translations;\n        /**\n         * Whether the button should be shown in narrow view or not.\n         */\n        this.showButtonInNarrowView = false;\n        /**\n         * The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n         */\n        this.actionButtonText = this.translations.get('readMore');\n        /**\n         * The blur-effect used for the background.\n         */\n        this.backgroundBlur = 'dark';\n        /**\n         * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n         */\n        this.bannerClick = new EventEmitter();\n        /**\n         * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n         */\n        this.dismissClick = new EventEmitter();\n        /**\n         * If the input imagePath results in an error, it will be reflected in this output.\n         */\n        this.imageError = new EventEmitter();\n    }\n    bannerClicked(event) {\n        const eventTarget = event.target;\n        const dismissButtonClicked = eventTarget.closest('.dismiss');\n        if (dismissButtonClicked)\n            return;\n        this.bannerClick.emit(event);\n    }\n    dismissClicked(event) {\n        this.dismissClick.emit(event);\n    }\n    onImageError($event) {\n        this.imageError.emit($event);\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.1.2\", ngImport: i0, type: ImageBannerComponent, deps: [{ token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"20.1.2\", type: ImageBannerComponent, isStandalone: true, selector: \"kirby-x-image-banner\", inputs: { title: \"title\", imagePath: \"imagePath\", bodyText: \"bodyText\", showButtonInNarrowView: \"showButtonInNarrowView\", actionButtonText: \"actionButtonText\", externalLink: \"externalLink\", backgroundBlur: \"backgroundBlur\" }, outputs: { bannerClick: \"bannerClick\", dismissClick: \"dismissClick\", imageError: \"imageError\" }, host: { properties: { \"class.show-button-in-narrow-view\": \"this.showButtonInNarrowView\", \"class\": \"this.backgroundBlur\" } }, hostDirectives: [{ directive: i2.ImageBannerHeightDirective }], ngImport: i0, template: \"<kirby-card [themeColor]=\\\"backgroundBlur === 'none' ? 'white' : backgroundBlur\\\">\\n  <div class=\\\"blur-image-wrapper\\\">\\n    <img class=\\\"blur-image\\\" [src]=\\\"imagePath\\\" alt=\\\"\\\" />\\n  </div>\\n\\n  <div class=\\\"main-content-wrapper\\\">\\n    <div class=\\\"main-content-image-wrapper\\\">\\n      <img class=\\\"main-content-image\\\" [src]=\\\"imagePath\\\" alt=\\\"\\\" (error)=\\\"onImageError($event)\\\" />\\n    </div>\\n\\n    <div class=\\\"main-content\\\">\\n      <div class=\\\"text-content-layout\\\">\\n        <div class=\\\"main-content-header\\\">\\n          @if (title) {\\n            <p class=\\\"kirby-text-normal-bold\\\">\\n              {{ title }}\\n            </p>\\n          } @else {\\n            <div class=\\\"title kirby-text-normal-bold\\\">\\n              <ng-content select=\\\"[title]\\\"></ng-content>\\n            </div>\\n          }\\n        </div>\\n\\n        <div class=\\\"main-content-body\\\">\\n          <p class=\\\"main-content-body-text kirby-text-small\\\">\\n            @if (bodyText) {\\n              {{ bodyText }}\\n            } @else {\\n              <ng-content select=\\\"[bodyText]\\\"></ng-content>\\n            }\\n          </p>\\n        </div>\\n      </div>\\n      @if (externalLink) {\\n        <!-- Only one of below anchors is displayed at a time -\\n            we want different behavior on varying screen widths -->\\n        <a\\n          kirby-button\\n          class=\\\"breakout wide-view-action\\\"\\n          [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n          [href]=\\\"externalLink\\\"\\n          target=\\\"_blank\\\"\\n          size=\\\"sm\\\"\\n        >\\n          {{ actionButtonText }}\\n          <kirby-icon name=\\\"link\\\"></kirby-icon>\\n        </a>\\n\\n        <a\\n          kirby-button\\n          class=\\\"breakout narrow-view-action\\\"\\n          [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n          [href]=\\\"externalLink\\\"\\n          [noDecoration]=\\\"true\\\"\\n          [showIconOnly]=\\\"true\\\"\\n          target=\\\"_blank\\\"\\n          size=\\\"sm\\\"\\n        >\\n          {{ actionButtonText }}\\n          <kirby-icon name=\\\"link\\\"></kirby-icon>\\n        </a>\\n      }\\n\\n      @if (!externalLink) {\\n        <!-- Only one of below buttons is displayed at a time -\\n            we want different behavior on varying screen widths -->\\n        <button\\n          kirby-button\\n          class=\\\"breakout wide-view-action\\\"\\n          size=\\\"sm\\\"\\n          (click)=\\\"bannerClicked($event)\\\"\\n          [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n        >\\n          {{ actionButtonText }}\\n        </button>\\n\\n        <button\\n          kirby-button\\n          class=\\\"breakout narrow-view-action\\\"\\n          size=\\\"sm\\\"\\n          (click)=\\\"bannerClicked($event)\\\"\\n          [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n          [noDecoration]=\\\"true\\\"\\n          [showIconOnly]=\\\"true\\\"\\n        >\\n          <span class=\\\"visually-hidden\\\">\\n            {{ actionButtonText }}\\n          </span>\\n        </button>\\n      }\\n    </div>\\n  </div>\\n\\n  @if (dismissClick.observed) {\\n    <div class=\\\"dismiss\\\">\\n      <button\\n        kirby-button\\n        size=\\\"xs\\\"\\n        (click)=\\\"dismissClicked($event)\\\"\\n        [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n        [showIconOnly]=\\\"true\\\"\\n        [attr.aria-label]=\\\"translations.get('close') + ' ' + title\\\"\\n      >\\n        <kirby-icon name=\\\"close\\\"></kirby-icon>\\n      </button>\\n    </div>\\n  }\\n</kirby-card>\\n\", styles: [\":host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\\\"\\\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\\\"\\\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;flex-direction:column;justify-content:space-between;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;padding:12px 0 8px 8px;overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\\\"\\\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);clip-path:inset(50%);border:medium;overflow:hidden;white-space:nowrap;padding:0}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:16px;font-weight:700;line-height:24px}\\n\"], dependencies: [{ kind: \"ngmodule\", type: CardModule }, { kind: \"component\", type: i3.CardComponent, selector: \"kirby-card\", inputs: [\"title\", \"subtitle\", \"backgroundImageUrl\", \"hasPadding\", \"sizes\", \"variant\"] }, { kind: \"directive\", type: i1.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\"] }, { kind: \"component\", type: ButtonComponent, selector: \"button[kirby-button],Button[kirby-button],a[kirby-button]\", inputs: [\"attentionLevel\", \"noDecoration\", \"themeColor\", \"expand\", \"isFloating\", \"size\", \"showIconOnly\"] }, { kind: \"ngmodule\", type: IconModule }, { kind: \"component\", type: i4.IconComponent, selector: \"kirby-icon\", inputs: [\"size\", \"name\"] }] }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.1.2\", ngImport: i0, type: ImageBannerComponent, decorators: [{\n            type: Component,\n            args: [{ selector: 'kirby-x-image-banner', imports: [CardModule, ButtonComponent, IconModule], hostDirectives: [ImageBannerHeightDirective], template: \"<kirby-card [themeColor]=\\\"backgroundBlur === 'none' ? 'white' : backgroundBlur\\\">\\n  <div class=\\\"blur-image-wrapper\\\">\\n    <img class=\\\"blur-image\\\" [src]=\\\"imagePath\\\" alt=\\\"\\\" />\\n  </div>\\n\\n  <div class=\\\"main-content-wrapper\\\">\\n    <div class=\\\"main-content-image-wrapper\\\">\\n      <img class=\\\"main-content-image\\\" [src]=\\\"imagePath\\\" alt=\\\"\\\" (error)=\\\"onImageError($event)\\\" />\\n    </div>\\n\\n    <div class=\\\"main-content\\\">\\n      <div class=\\\"text-content-layout\\\">\\n        <div class=\\\"main-content-header\\\">\\n          @if (title) {\\n            <p class=\\\"kirby-text-normal-bold\\\">\\n              {{ title }}\\n            </p>\\n          } @else {\\n            <div class=\\\"title kirby-text-normal-bold\\\">\\n              <ng-content select=\\\"[title]\\\"></ng-content>\\n            </div>\\n          }\\n        </div>\\n\\n        <div class=\\\"main-content-body\\\">\\n          <p class=\\\"main-content-body-text kirby-text-small\\\">\\n            @if (bodyText) {\\n              {{ bodyText }}\\n            } @else {\\n              <ng-content select=\\\"[bodyText]\\\"></ng-content>\\n            }\\n          </p>\\n        </div>\\n      </div>\\n      @if (externalLink) {\\n        <!-- Only one of below anchors is displayed at a time -\\n            we want different behavior on varying screen widths -->\\n        <a\\n          kirby-button\\n          class=\\\"breakout wide-view-action\\\"\\n          [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n          [href]=\\\"externalLink\\\"\\n          target=\\\"_blank\\\"\\n          size=\\\"sm\\\"\\n        >\\n          {{ actionButtonText }}\\n          <kirby-icon name=\\\"link\\\"></kirby-icon>\\n        </a>\\n\\n        <a\\n          kirby-button\\n          class=\\\"breakout narrow-view-action\\\"\\n          [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n          [href]=\\\"externalLink\\\"\\n          [noDecoration]=\\\"true\\\"\\n          [showIconOnly]=\\\"true\\\"\\n          target=\\\"_blank\\\"\\n          size=\\\"sm\\\"\\n        >\\n          {{ actionButtonText }}\\n          <kirby-icon name=\\\"link\\\"></kirby-icon>\\n        </a>\\n      }\\n\\n      @if (!externalLink) {\\n        <!-- Only one of below buttons is displayed at a time -\\n            we want different behavior on varying screen widths -->\\n        <button\\n          kirby-button\\n          class=\\\"breakout wide-view-action\\\"\\n          size=\\\"sm\\\"\\n          (click)=\\\"bannerClicked($event)\\\"\\n          [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n        >\\n          {{ actionButtonText }}\\n        </button>\\n\\n        <button\\n          kirby-button\\n          class=\\\"breakout narrow-view-action\\\"\\n          size=\\\"sm\\\"\\n          (click)=\\\"bannerClicked($event)\\\"\\n          [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n          [noDecoration]=\\\"true\\\"\\n          [showIconOnly]=\\\"true\\\"\\n        >\\n          <span class=\\\"visually-hidden\\\">\\n            {{ actionButtonText }}\\n          </span>\\n        </button>\\n      }\\n    </div>\\n  </div>\\n\\n  @if (dismissClick.observed) {\\n    <div class=\\\"dismiss\\\">\\n      <button\\n        kirby-button\\n        size=\\\"xs\\\"\\n        (click)=\\\"dismissClicked($event)\\\"\\n        [attentionLevel]=\\\"backgroundBlur === 'none' ? '3' : '2'\\\"\\n        [showIconOnly]=\\\"true\\\"\\n        [attr.aria-label]=\\\"translations.get('close') + ' ' + title\\\"\\n      >\\n        <kirby-icon name=\\\"close\\\"></kirby-icon>\\n      </button>\\n    </div>\\n  }\\n</kirby-card>\\n\", styles: [\":host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\\\"\\\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\\\"\\\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;flex-direction:column;justify-content:space-between;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;padding:12px 0 8px 8px;overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\\\"\\\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);clip-path:inset(50%);border:medium;overflow:hidden;white-space:nowrap;padding:0}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:16px;font-weight:700;line-height:24px}\\n\"] }]\n        }], ctorParameters: () => [{ type: i1.TranslationService }], propDecorators: { title: [{\n                type: Input\n            }], imagePath: [{\n                type: Input\n            }], bodyText: [{\n                type: Input\n            }], showButtonInNarrowView: [{\n                type: HostBinding,\n                args: ['class.show-button-in-narrow-view']\n            }, {\n                type: Input\n            }], actionButtonText: [{\n                type: Input\n            }], externalLink: [{\n                type: Input\n            }], backgroundBlur: [{\n                type: HostBinding,\n                args: ['class']\n            }, {\n                type: Input\n            }], bannerClick: [{\n                type: Output\n            }], dismissClick: [{\n                type: Output\n            }], imageError: [{\n                type: Output\n            }] } });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2ltYWdlLWJhbm5lci9zcmMvaW1hZ2UtYmFubmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL2ltYWdlLWJhbm5lci9zcmMvaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDbkUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBRTVELE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOzs7Ozs7QUFTN0UsTUFBTSxPQUFPLG9CQUFvQjtJQXdEL0IsWUFBbUIsWUFBZ0M7UUFBaEMsaUJBQVksR0FBWixZQUFZLENBQW9CO1FBeENuRDs7V0FFRztRQUdILDJCQUFzQixHQUFZLEtBQUssQ0FBQztRQUV4Qzs7V0FFRztRQUNNLHFCQUFnQixHQUF1QixJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQU9sRjs7V0FFRztRQUdILG1CQUFjLEdBQThCLE1BQU0sQ0FBQztRQUVuRDs7V0FFRztRQUNPLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztRQUVsRDs7V0FFRztRQUNPLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztRQUVuRDs7V0FFRztRQUVILGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO0lBRVUsQ0FBQztJQUVoRCxhQUFhLENBQUMsS0FBWTtRQUMvQixNQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsTUFBcUIsQ0FBQztRQUNoRCxNQUFNLG9CQUFvQixHQUFHLFdBQVcsQ0FBQyxPQUFPLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDN0QsSUFBSSxvQkFBb0I7WUFBRSxPQUFPO1FBQ2pDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9CLENBQUM7SUFFTSxjQUFjLENBQUMsS0FBWTtRQUNoQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBRU0sWUFBWSxDQUFDLE1BQWtCO1FBQ3BDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQy9CLENBQUM7OEdBdkVVLG9CQUFvQjtrR0FBcEIsb0JBQW9CLGdsQkNkakMsbzRHQTZHQSx3NklEcEdZLFVBQVUsbWdCQUFFLGVBQWUsK01BQUUsVUFBVTs7MkZBS3RDLG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFDRSxzQkFBc0IsV0FDdkIsQ0FBQyxVQUFVLEVBQUUsZUFBZSxFQUFFLFVBQVUsQ0FBQyxrQkFDbEMsQ0FBQywwQkFBMEIsQ0FBQzt1RkFRbkMsS0FBSztzQkFBYixLQUFLO2dCQUtHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFPTixzQkFBc0I7c0JBRnJCLFdBQVc7dUJBQUMsa0NBQWtDOztzQkFDOUMsS0FBSztnQkFNRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBS0csWUFBWTtzQkFBcEIsS0FBSztnQkFPTixjQUFjO3NCQUZiLFdBQVc7dUJBQUMsT0FBTzs7c0JBQ25CLEtBQUs7Z0JBTUksV0FBVztzQkFBcEIsTUFBTTtnQkFLRyxZQUFZO3NCQUFyQixNQUFNO2dCQU1QLFVBQVU7c0JBRFQsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2FyZE1vZHVsZSB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vY2FyZCc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICdAa2lyYnlkZXNpZ24vZGVzaWduc3lzdGVtL2J1dHRvbic7XG5pbXBvcnQgeyBJY29uTW9kdWxlIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9pY29uJztcbmltcG9ydCB7IFRyYW5zbGF0aW9uU2VydmljZSB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vc2hhcmVkJztcbmltcG9ydCB7IEltYWdlQmFubmVySGVpZ2h0RGlyZWN0aXZlIH0gZnJvbSAnLi9pbWFnZS1iYW5uZXItaGVpZ2h0LmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tpcmJ5LXgtaW1hZ2UtYmFubmVyJyxcbiAgaW1wb3J0czogW0NhcmRNb2R1bGUsIEJ1dHRvbkNvbXBvbmVudCwgSWNvbk1vZHVsZV0sXG4gIGhvc3REaXJlY3RpdmVzOiBbSW1hZ2VCYW5uZXJIZWlnaHREaXJlY3RpdmVdLFxuICB0ZW1wbGF0ZVVybDogJy4vaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2ltYWdlLWJhbm5lci5jb21wb25lbnQuc2NzcycsXG59KVxuZXhwb3J0IGNsYXNzIEltYWdlQmFubmVyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFRoZSB0aXRsZSBwbGFjZWQgaW5zaWRlIHRoZSBpbWFnZSBiYW5uZXJzIGhlYWRlci5cbiAgICovXG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSBpbWFnZSBzaG93biBvbiB0aGUgYmFubmVyLCBhbmQgdXNlZCBmb3IgdGhlIGJhY2tncm91bmQgYmx1ciBlZmZlY3QuXG4gICAqL1xuICBASW5wdXQoKSBpbWFnZVBhdGg6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogVGhlIGJvZHkgdGV4dCBwbGFjZWQgYmVsb3cgdGhlIHRpdGxlLlxuICAgKi9cbiAgQElucHV0KCkgYm9keVRleHQ6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgYnV0dG9uIHNob3VsZCBiZSBzaG93biBpbiBuYXJyb3cgdmlldyBvciBub3QuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNob3ctYnV0dG9uLWluLW5hcnJvdy12aWV3JylcbiAgQElucHV0KClcbiAgc2hvd0J1dHRvbkluTmFycm93VmlldzogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUaGUgdGV4dCBvZiB0aGUgYnV0dG9uIGluIHRoZSBjb250ZW50IGFyZWEgb2YgdGhlIGltYWdlIGJhbm5lci4gSWYgbGVmdCBlbXB0eSwgd2lsbCBkZWZhdWx0IHRvICdSZWFkIG1vcmUnIChvciBlcXVpdmFsZW50IHRyYW5zbGF0aW9uIGZvciBbc3VwcG9ydGVkIGxvY2FsZXNdKGh0dHBzOi8vY29va2Jvb2sua2lyYnkuZGVzaWduLyMvaG9tZS9sb2NhbGl6YXRpb24pKS5cbiAgICovXG4gIEBJbnB1dCgpIGFjdGlvbkJ1dHRvblRleHQ6IHN0cmluZyB8IHVuZGVmaW5lZCA9IHRoaXMudHJhbnNsYXRpb25zLmdldCgncmVhZE1vcmUnKTtcblxuICAvKipcbiAgICogV2hlbiBhbiBleHRlcm5hbCBsaW5rIGlzIHN1cHBsaWVkIHRoZSBlbnRpcmUgYmFubmVyIHdpbGwgYmUgYW4gYW5jaG9yLXRhZyBhbmQgbmF2aWdhdGUgd2hlbiBhY3RpdmF0ZWQuXG4gICAqL1xuICBASW5wdXQoKSBleHRlcm5hbExpbms6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogVGhlIGJsdXItZWZmZWN0IHVzZWQgZm9yIHRoZSBiYWNrZ3JvdW5kLlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIEBJbnB1dCgpXG4gIGJhY2tncm91bmRCbHVyOiAnZGFyaycgfCAnbGlnaHQnIHwgJ25vbmUnID0gJ2RhcmsnO1xuXG4gIC8qKlxuICAgKiBFbWl0dGVkIGV2ZXJ5IHRpbWUgdGhlIGJhbm5lciBpcyBhY3RpdmF0ZWQuIFRoZSBlbnRpcmUgYmFubmVyIGlzIGludGVyYWN0aXZlLCBhbmQgd2lsbCBiZSBhY3RpdmF0ZWQgYnkgY2xpY2sgYW5kIGtleWJvYXJkIGludGVyYWN0aW9uLlxuICAgKi9cbiAgQE91dHB1dCgpIGJhbm5lckNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcblxuICAvKipcbiAgICogSWYgc3Vic2NyaWJlZCB0bywgYSBkaXNtaXNzIGJ1dHRvbiB3aWxsIGJlIHNob3duLiBFbWl0dGVkIGV2ZXJ5IHRpbWUgdGhlIGRpc21pc3MgYnV0dG9uIGlzIGFjdGl2YXRlZCBieSBjbGljayBhbmQga2V5Ym9hcmQgaW50ZXJhY3Rpb24uXG4gICAqL1xuICBAT3V0cHV0KCkgZGlzbWlzc0NsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcblxuICAvKipcbiAgICogSWYgdGhlIGlucHV0IGltYWdlUGF0aCByZXN1bHRzIGluIGFuIGVycm9yLCBpdCB3aWxsIGJlIHJlZmxlY3RlZCBpbiB0aGlzIG91dHB1dC5cbiAgICovXG4gIEBPdXRwdXQoKVxuICBpbWFnZUVycm9yID0gbmV3IEV2ZW50RW1pdHRlcjxFcnJvckV2ZW50PigpO1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyB0cmFuc2xhdGlvbnM6IFRyYW5zbGF0aW9uU2VydmljZSkge31cblxuICBwdWJsaWMgYmFubmVyQ2xpY2tlZChldmVudDogRXZlbnQpIHtcbiAgICBjb25zdCBldmVudFRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudDtcbiAgICBjb25zdCBkaXNtaXNzQnV0dG9uQ2xpY2tlZCA9IGV2ZW50VGFyZ2V0LmNsb3Nlc3QoJy5kaXNtaXNzJyk7XG4gICAgaWYgKGRpc21pc3NCdXR0b25DbGlja2VkKSByZXR1cm47XG4gICAgdGhpcy5iYW5uZXJDbGljay5lbWl0KGV2ZW50KTtcbiAgfVxuXG4gIHB1YmxpYyBkaXNtaXNzQ2xpY2tlZChldmVudDogRXZlbnQpIHtcbiAgICB0aGlzLmRpc21pc3NDbGljay5lbWl0KGV2ZW50KTtcbiAgfVxuXG4gIHB1YmxpYyBvbkltYWdlRXJyb3IoJGV2ZW50OiBFcnJvckV2ZW50KSB7XG4gICAgdGhpcy5pbWFnZUVycm9yLmVtaXQoJGV2ZW50KTtcbiAgfVxufVxuIiwiPGtpcmJ5LWNhcmQgW3RoZW1lQ29sb3JdPVwiYmFja2dyb3VuZEJsdXIgPT09ICdub25lJyA/ICd3aGl0ZScgOiBiYWNrZ3JvdW5kQmx1clwiPlxuICA8ZGl2IGNsYXNzPVwiYmx1ci1pbWFnZS13cmFwcGVyXCI+XG4gICAgPGltZyBjbGFzcz1cImJsdXItaW1hZ2VcIiBbc3JjXT1cImltYWdlUGF0aFwiIGFsdD1cIlwiIC8+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtd3JhcHBlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtaW1hZ2Utd3JhcHBlclwiPlxuICAgICAgPGltZyBjbGFzcz1cIm1haW4tY29udGVudC1pbWFnZVwiIFtzcmNdPVwiaW1hZ2VQYXRoXCIgYWx0PVwiXCIgKGVycm9yKT1cIm9uSW1hZ2VFcnJvcigkZXZlbnQpXCIgLz5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LWNvbnRlbnQtbGF5b3V0XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtaGVhZGVyXCI+XG4gICAgICAgICAgQGlmICh0aXRsZSkge1xuICAgICAgICAgICAgPHAgY2xhc3M9XCJraXJieS10ZXh0LW5vcm1hbC1ib2xkXCI+XG4gICAgICAgICAgICAgIHt7IHRpdGxlIH19XG4gICAgICAgICAgICA8L3A+XG4gICAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwidGl0bGUga2lyYnktdGV4dC1ub3JtYWwtYm9sZFwiPlxuICAgICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdGl0bGVdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwibWFpbi1jb250ZW50LWJvZHlcIj5cbiAgICAgICAgICA8cCBjbGFzcz1cIm1haW4tY29udGVudC1ib2R5LXRleHQga2lyYnktdGV4dC1zbWFsbFwiPlxuICAgICAgICAgICAgQGlmIChib2R5VGV4dCkge1xuICAgICAgICAgICAgICB7eyBib2R5VGV4dCB9fVxuICAgICAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltib2R5VGV4dF1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9wPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgQGlmIChleHRlcm5hbExpbmspIHtcbiAgICAgICAgPCEtLSBPbmx5IG9uZSBvZiBiZWxvdyBhbmNob3JzIGlzIGRpc3BsYXllZCBhdCBhIHRpbWUgLVxuICAgICAgICAgICAgd2Ugd2FudCBkaWZmZXJlbnQgYmVoYXZpb3Igb24gdmFyeWluZyBzY3JlZW4gd2lkdGhzIC0tPlxuICAgICAgICA8YVxuICAgICAgICAgIGtpcmJ5LWJ1dHRvblxuICAgICAgICAgIGNsYXNzPVwiYnJlYWtvdXQgd2lkZS12aWV3LWFjdGlvblwiXG4gICAgICAgICAgW2F0dGVudGlvbkxldmVsXT1cImJhY2tncm91bmRCbHVyID09PSAnbm9uZScgPyAnMycgOiAnMidcIlxuICAgICAgICAgIFtocmVmXT1cImV4dGVybmFsTGlua1wiXG4gICAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICBzaXplPVwic21cIlxuICAgICAgICA+XG4gICAgICAgICAge3sgYWN0aW9uQnV0dG9uVGV4dCB9fVxuICAgICAgICAgIDxraXJieS1pY29uIG5hbWU9XCJsaW5rXCI+PC9raXJieS1pY29uPlxuICAgICAgICA8L2E+XG5cbiAgICAgICAgPGFcbiAgICAgICAgICBraXJieS1idXR0b25cbiAgICAgICAgICBjbGFzcz1cImJyZWFrb3V0IG5hcnJvdy12aWV3LWFjdGlvblwiXG4gICAgICAgICAgW2F0dGVudGlvbkxldmVsXT1cImJhY2tncm91bmRCbHVyID09PSAnbm9uZScgPyAnMycgOiAnMidcIlxuICAgICAgICAgIFtocmVmXT1cImV4dGVybmFsTGlua1wiXG4gICAgICAgICAgW25vRGVjb3JhdGlvbl09XCJ0cnVlXCJcbiAgICAgICAgICBbc2hvd0ljb25Pbmx5XT1cInRydWVcIlxuICAgICAgICAgIHRhcmdldD1cIl9ibGFua1wiXG4gICAgICAgICAgc2l6ZT1cInNtXCJcbiAgICAgICAgPlxuICAgICAgICAgIHt7IGFjdGlvbkJ1dHRvblRleHQgfX1cbiAgICAgICAgICA8a2lyYnktaWNvbiBuYW1lPVwibGlua1wiPjwva2lyYnktaWNvbj5cbiAgICAgICAgPC9hPlxuICAgICAgfVxuXG4gICAgICBAaWYgKCFleHRlcm5hbExpbmspIHtcbiAgICAgICAgPCEtLSBPbmx5IG9uZSBvZiBiZWxvdyBidXR0b25zIGlzIGRpc3BsYXllZCBhdCBhIHRpbWUgLVxuICAgICAgICAgICAgd2Ugd2FudCBkaWZmZXJlbnQgYmVoYXZpb3Igb24gdmFyeWluZyBzY3JlZW4gd2lkdGhzIC0tPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAga2lyYnktYnV0dG9uXG4gICAgICAgICAgY2xhc3M9XCJicmVha291dCB3aWRlLXZpZXctYWN0aW9uXCJcbiAgICAgICAgICBzaXplPVwic21cIlxuICAgICAgICAgIChjbGljayk9XCJiYW5uZXJDbGlja2VkKCRldmVudClcIlxuICAgICAgICAgIFthdHRlbnRpb25MZXZlbF09XCJiYWNrZ3JvdW5kQmx1ciA9PT0gJ25vbmUnID8gJzMnIDogJzInXCJcbiAgICAgICAgPlxuICAgICAgICAgIHt7IGFjdGlvbkJ1dHRvblRleHQgfX1cbiAgICAgICAgPC9idXR0b24+XG5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIGtpcmJ5LWJ1dHRvblxuICAgICAgICAgIGNsYXNzPVwiYnJlYWtvdXQgbmFycm93LXZpZXctYWN0aW9uXCJcbiAgICAgICAgICBzaXplPVwic21cIlxuICAgICAgICAgIChjbGljayk9XCJiYW5uZXJDbGlja2VkKCRldmVudClcIlxuICAgICAgICAgIFthdHRlbnRpb25MZXZlbF09XCJiYWNrZ3JvdW5kQmx1ciA9PT0gJ25vbmUnID8gJzMnIDogJzInXCJcbiAgICAgICAgICBbbm9EZWNvcmF0aW9uXT1cInRydWVcIlxuICAgICAgICAgIFtzaG93SWNvbk9ubHldPVwidHJ1ZVwiXG4gICAgICAgID5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInZpc3VhbGx5LWhpZGRlblwiPlxuICAgICAgICAgICAge3sgYWN0aW9uQnV0dG9uVGV4dCB9fVxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIEBpZiAoZGlzbWlzc0NsaWNrLm9ic2VydmVkKSB7XG4gICAgPGRpdiBjbGFzcz1cImRpc21pc3NcIj5cbiAgICAgIDxidXR0b25cbiAgICAgICAga2lyYnktYnV0dG9uXG4gICAgICAgIHNpemU9XCJ4c1wiXG4gICAgICAgIChjbGljayk9XCJkaXNtaXNzQ2xpY2tlZCgkZXZlbnQpXCJcbiAgICAgICAgW2F0dGVudGlvbkxldmVsXT1cImJhY2tncm91bmRCbHVyID09PSAnbm9uZScgPyAnMycgOiAnMidcIlxuICAgICAgICBbc2hvd0ljb25Pbmx5XT1cInRydWVcIlxuICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cInRyYW5zbGF0aW9ucy5nZXQoJ2Nsb3NlJykgKyAnICcgKyB0aXRsZVwiXG4gICAgICA+XG4gICAgICAgIDxraXJieS1pY29uIG5hbWU9XCJjbG9zZVwiPjwva2lyYnktaWNvbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICB9XG48L2tpcmJ5LWNhcmQ+XG4iXX0=","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2lyYnlkZXNpZ24tZXh0ZW5zaW9ucy1hbmd1bGFyLWltYWdlLWJhbm5lci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2ltYWdlLWJhbm5lci9zcmMva2lyYnlkZXNpZ24tZXh0ZW5zaW9ucy1hbmd1bGFyLWltYWdlLWJhbm5lci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":["i2.ImageBannerHeightDirective"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html","../../image-banner/src/kirbydesign-extensions-angular-image-banner.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/**\n * @Description Temporary directive to ensure correct scroll position behavior on Safari.\n *\n * When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n */\n@Directive({\n  selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n  private currentHeight: number = 0;\n  private host = inject(ElementRef);\n  private resizeObserverService = inject(ResizeObserverService);\n  private renderer = inject(Renderer2);\n\n  ngOnInit() {\n    this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n  }\n\n  ngOnDestroy() {\n    this.resizeObserverService.unobserve(this.host);\n  }\n\n  private setCardHeightOnHost(entry: ResizeObserverEntry) {\n    const hostElement = entry.target as HTMLElement;\n    const card = hostElement.querySelector('kirby-card');\n    const cardHeight = card?.getBoundingClientRect().height;\n\n    if (!hostElement || !cardHeight) return;\n    if (cardHeight === this.currentHeight) return;\n\n    this.currentHeight = cardHeight;\n    this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n  }\n}\n","import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n  selector: 'kirby-x-image-banner',\n  imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective],\n  hostDirectives: [ImageBannerHeightDirective],\n  templateUrl: './image-banner.component.html',\n  styleUrl: './image-banner.component.scss',\n})\nexport class ImageBannerComponent {\n  /**\n   * The title placed inside the image banners header.\n   */\n  @Input() title: string | undefined;\n\n  /**\n   * The image shown on the banner, and used for the background blur effect.\n   */\n  @Input() imagePath: string | undefined;\n\n  /**\n   * The body text placed below the title.\n   */\n  @Input() bodyText: string | undefined;\n\n  /**\n   * Whether the button should be shown in narrow view or not.\n   */\n  @HostBinding('class.show-button-in-narrow-view')\n  @Input()\n  showButtonInNarrowView: boolean = false;\n\n  /**\n   * The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n   */\n  @Input() actionButtonText: string | undefined = this.translations.get('readMore');\n\n  /**\n   * When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.\n   */\n  @Input() externalLink: string | undefined;\n\n  /**\n   * The blur-effect used for the background.\n   */\n  @HostBinding('class')\n  @Input()\n  backgroundBlur: 'dark' | 'light' | 'none' = 'dark';\n\n  /**\n   * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n   */\n  @Output() bannerClick = new EventEmitter<Event>();\n\n  /**\n   * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n   */\n  @Output() dismissClick = new EventEmitter<Event>();\n\n  /**\n   * If the input imagePath results in an error, it will be reflected in this output.\n   */\n  @Output()\n  imageError = new EventEmitter<ErrorEvent>();\n\n  constructor(public translations: TranslationService) {}\n\n  public bannerClicked(event: Event) {\n    const eventTarget = event.target as HTMLElement;\n    const dismissButtonClicked = eventTarget.closest('.dismiss');\n    if (dismissButtonClicked) return;\n    this.bannerClick.emit(event);\n  }\n\n  public dismissClicked(event: Event) {\n    this.dismissClick.emit(event);\n  }\n\n  public onImageError($event: ErrorEvent) {\n    this.imageError.emit($event);\n  }\n}\n","<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <div class=\"dismiss\">\n      <button\n        kirby-button\n        size=\"xs\"\n        (click)=\"dismissClicked($event)\"\n        [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        [showIconOnly]=\"true\"\n        [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2.ImageBannerHeightDirective"],"mappings":"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"}

package/fesm2022/kirbydesign-extensions-angular-localization.mjs

@@ -89,10 +89,10 @@ class DateOnlyPipe extends AbstractTimezoneCompensatingPipe {
     transform(input) {
         return this.format(input, DateFormats.SHORT_DATE_FORMAT);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DateOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: DateOnlyPipe, isStandalone: true, name: "dateOnly" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DateOnlyPipe, isStandalone: true, name: "dateOnly" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DateOnlyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateOnlyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dateOnly',
@@ -122,10 +122,10 @@ class TimeOnlyPipe extends AbstractTimezoneCompensatingPipe {
                 throw new Error(`Unable to derive format from "${format}"`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TimeOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: TimeOnlyPipe, isStandalone: true, name: "timeOnly" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TimeOnlyPipe, isStandalone: true, name: "timeOnly" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TimeOnlyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeOnlyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeOnly',
@@ -160,10 +160,10 @@ class TimeOrDatePipe extends AbstractTimezoneCompensatingPipe {
         }
         return this.format(date, format);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TimeOrDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: TimeOrDatePipe, isStandalone: true, name: "timeOrDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeOrDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TimeOrDatePipe, isStandalone: true, name: "timeOrDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TimeOrDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeOrDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeOrDate',
@@ -181,10 +181,10 @@ class FormatNumberService {
         }
         return formatNumber(value, this.localeId, digitsInfo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FormatNumberService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FormatNumberService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormatNumberService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormatNumberService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FormatNumberService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormatNumberService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -201,10 +201,10 @@ class FormatNumberPipe {
     transform(value, digitsInfo = '1.2-2') {
         return this.formatNumberService.formatNumber(value, digitsInfo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FormatNumberPipe, deps: [{ token: FormatNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: FormatNumberPipe, isStandalone: true, name: "formatNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormatNumberPipe, deps: [{ token: FormatNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: FormatNumberPipe, isStandalone: true, name: "formatNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FormatNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormatNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'formatNumber',
@@ -280,10 +280,10 @@ class AmountService {
         }
         return formatAmount(amount, this.locale, this.config, amountServiceConfiguration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AmountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AmountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AmountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -316,10 +316,10 @@ class AmountPipe {
     transform(amount, amountServiceConfiguration) {
         return this.amountService.formatAmount(amount, amountServiceConfiguration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AmountPipe, deps: [{ token: AmountService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: AmountPipe, isStandalone: true, name: "amount" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmountPipe, deps: [{ token: AmountService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AmountPipe, isStandalone: true, name: "amount" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AmountPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmountPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'amount',
@@ -343,10 +343,10 @@ class AccountNumberPipe {
     transform(value) {
         return formatAccountNumber(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AccountNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: AccountNumberPipe, isStandalone: true, name: "accountNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccountNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AccountNumberPipe, isStandalone: true, name: "accountNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AccountNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccountNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'accountNumber',
@@ -379,10 +379,10 @@ class PhoneNumberService {
             return formattedNumber;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PhoneNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PhoneNumberService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PhoneNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PhoneNumberService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PhoneNumberService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PhoneNumberService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -403,10 +403,10 @@ class PhoneNumberPipe {
     transform(phoneNumber, chunk = 2, showCountryCode) {
         return this.phoneNumberService.formatPhoneNumber(phoneNumber, chunk, showCountryCode);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PhoneNumberPipe, deps: [{ token: PhoneNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phoneNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PhoneNumberPipe, deps: [{ token: PhoneNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phoneNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PhoneNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PhoneNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'phoneNumber',