@kirbydesign/designsystem 11.11.3-dev-e7cb27f → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-icon.mjs

@@ -1,312 +1,890 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Injectable, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { IonIcon } from '@ionic/angular';
-import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, Inject, Injectable, InjectionToken, Input, NgModule } from "@angular/core";
+import { IonIcon } from "@ionic/angular";
+import { ThemeColorDirective } from "@kirbydesign/designsystem/shared";
 const sortIconsByName = (icons) => {
-    const collator = new Intl.Collator('en');
-    return icons.sort((a, b) => collator.compare(a.name, b.name));
-};
-const kirbyIconSettings = {
-    icons: sortIconsByName([
-        { name: 'accounts-outline', svg: 'accounts-outline.svg' },
-        { name: 'accounts', svg: 'accounts.svg' },
-        { name: 'add', svg: 'add.svg' },
-        { name: 'remove', svg: 'remove.svg' },
-        { name: 'unsubscribe', svg: 'unsubscribe.svg' },
-        { name: 'arrow-back', svg: 'arrow-back.svg' },
-        { name: 'arrow-down', svg: 'arrow-down.svg' },
-        { name: 'arrow-more', svg: 'arrow-more.svg' },
-        { name: 'arrow-up', svg: 'arrow-up.svg' },
-        { name: 'attach', svg: 'attach.svg' },
-        { name: 'backspace', svg: 'backspace.svg' },
-        { name: 'calendar', svg: 'calendar.svg' },
-        { name: 'camera', svg: 'camera.svg' },
-        { name: 'car', svg: 'car.svg' },
-        { name: 'chainlink', svg: 'chainlink.svg' },
-        { name: 'checkbox-outline', svg: 'checkbox-outline.svg' },
-        { name: 'checkbox', svg: 'checkbox.svg' },
-        { name: 'checkmark-selected', svg: 'checkmark-selected.svg' },
-        { name: 'close', svg: 'close.svg' },
-        { name: 'cog', svg: 'cog.svg' },
-        { name: 'coinstack', svg: 'coinstack.svg' },
-        { name: 'contact', svg: 'contact.svg' },
-        { name: 'copy', svg: 'copy.svg' },
-        { name: 'flag', svg: 'flag.svg' },
-        { name: 'edit', svg: 'edit.svg' },
-        { name: 'filter', svg: 'filter.svg' },
-        { name: 'flash-off', svg: 'flash-off.svg' },
-        { name: 'flash', svg: 'flash.svg' },
-        { name: 'moneybag', svg: 'moneybag.svg' },
-        { name: 'help', svg: 'help.svg' },
-        { name: 'home', svg: 'home.svg' },
-        { name: 'id-card', svg: 'id-card.svg' },
-        { name: 'inbox', svg: 'inbox.svg' },
-        { name: 'inbox-outline', svg: 'inbox-outline.svg' },
-        { name: 'information', svg: 'information.svg' },
-        { name: 'insurance', svg: 'insurance.svg' },
-        { name: 'investment', svg: 'investment.svg' },
-        { name: 'key', svg: 'key.svg' },
-        { name: 'kirby', svg: 'kirby.svg' },
-        { name: 'link', svg: 'link.svg' },
-        { name: 'log-out', svg: 'log-out.svg' },
-        { name: 'menu-outline', svg: 'menu-outline.svg' },
-        { name: 'menu', svg: 'menu.svg' },
-        { name: 'menu-no-decoration', svg: 'menu-no-decoration.svg' },
-        { name: 'message-read', svg: 'message-read.svg' },
-        { name: 'misc', svg: 'misc.svg' },
-        { name: 'more', svg: 'more.svg' },
-        { name: 'move', svg: 'move.svg' },
-        { name: 'note', svg: 'note.svg' },
-        { name: 'note-create', svg: 'note-create.svg' },
-        { name: 'payment-card', svg: 'payment-card.svg' },
-        { name: 'pension', svg: 'pension.svg' },
-        { name: 'person-outline', svg: 'person-outline.svg' },
-        { name: 'person', svg: 'person.svg' },
-        { name: 'person-blocked', svg: 'person-blocked.svg' },
-        { name: 'person-check', svg: 'person-check.svg' },
-        { name: 'person-close', svg: 'person-close.svg' },
-        { name: 'person-power', svg: 'person-power.svg' },
-        { name: 'person-cloud', svg: 'person-cloud.svg' },
-        { name: 'person-warning', svg: 'person-warning.svg' },
-        { name: 'phone-device-pin', svg: 'phone-device-pin.svg' },
-        { name: 'qr', svg: 'QR.svg' },
-        { name: 'recurring', svg: 'recurring.svg' },
-        { name: 'salary', svg: 'salary.svg' },
-        { name: 'search', svg: 'search.svg' },
-        { name: 'share', svg: 'share.svg' },
-        { name: 'sort', svg: 'sort.svg' },
-        { name: 'support', svg: 'support.svg' },
-        { name: 'swap', svg: 'swap.svg' },
-        { name: 'trash', svg: 'trash.svg' },
-        { name: 'foreign-payment', svg: 'foreign-payment.svg' },
-        { name: 'clock', svg: 'clock.svg' },
-        { name: 'verify', svg: 'verify.svg' },
-        { name: 'warning', svg: 'warning.svg' },
-        { name: 'write-message', svg: 'write-message.svg' },
-        { name: 'reorder', svg: 'reorder.svg' },
-        { name: 'accident', svg: 'accident.svg' },
-        { name: 'health', svg: 'health.svg' },
-        { name: 'illness', svg: 'illness.svg' },
-        { name: 'incapacity', svg: 'incapacity.svg' },
-        { name: 'life', svg: 'life.svg' },
-        { name: 'help-decoration', svg: 'help-decoration.svg' },
-        { name: 'information-decoration', svg: 'information-decoration.svg' },
-        { name: 'warning-decoration', svg: 'warning-decoration.svg' },
-        { name: 'notification', svg: 'notification.svg' },
-        { name: 'transfer-ownership', svg: 'transfer-ownership.svg' },
-        { name: 'update', svg: 'update.svg' },
-        { name: 'user-blocked', svg: 'user-blocked.svg' },
-        { name: 'add-bank', svg: 'add-bank.svg' },
-        { name: 'participants', svg: 'participants.svg' },
-        { name: 'download', svg: 'download.svg' },
-        { name: 'globe-transfer', svg: 'globe-transfer.svg' },
-        { name: 'banknotes', svg: 'banknotes.svg' },
-        { name: 'air-balloon', svg: 'air-balloon.svg' },
-        { name: 'piggybank', svg: 'piggybank.svg' },
-        { name: 'business', svg: 'business.svg' },
-        { name: 'navigation', svg: 'navigation.svg' },
-        { name: 'phone-device', svg: 'phone-device.svg' },
-        { name: 'upload', svg: 'upload.svg' },
-        { name: 'document', svg: 'document.svg' },
-        { name: 'chat', svg: 'chat.svg' },
-        { name: 'feedback', svg: 'feedback.svg' },
-        { name: 'keyboard', svg: 'keyboard.svg' },
-        { name: 'lock', svg: 'lock.svg' },
-        { name: 'see', svg: 'see.svg' },
-        { name: 'overview', svg: 'overview.svg' },
-        { name: 'overview-outline', svg: 'overview-outline.svg' },
-        { name: 'arrow-down-fill', svg: 'arrow-down-fill.svg' },
-        { name: 'arrow-up-fill', svg: 'arrow-up-fill.svg' },
-        { name: 'calculator', svg: 'calculator.svg' },
-        { name: 'grid', svg: 'grid.svg' },
-        { name: 'list', svg: 'list.svg' },
-        { name: 'adjust', svg: 'adjust.svg' },
-        { name: 'bs-logo', svg: 'bs-logo.svg' },
-        { name: 'company', svg: 'company.svg' },
-        { name: 'budget', svg: 'budget.svg' },
-        { name: 'history', svg: 'history.svg' },
-        { name: 'dot', svg: 'dot.svg' },
-        { name: 'agreement', svg: 'agreement.svg' },
-        { name: 'sunshine', svg: 'sunshine.svg' },
-        { name: 'star', svg: 'star.svg' },
-        { name: 'star-fill', svg: 'star-fill.svg' },
-        { name: 'payment', svg: 'payment.svg' },
-        { name: 'revert', svg: 'revert.svg' },
-        { name: 'fees', svg: 'fees.svg' },
-        { name: 'crossedeye', svg: 'crossedeye.svg' },
-        { name: 'common', svg: 'common.svg' },
-        { name: 'calendar-start', svg: 'calendar-start.svg' },
-        { name: 'calendar-end', svg: 'calendar-end.svg' },
-        { name: 'expand', svg: 'expand.svg' },
-        { name: 'contract', svg: 'contract.svg' },
-        { name: 'house', svg: 'house.svg' },
-        { name: 'tractor', svg: 'tractor.svg' },
-        { name: 'flower', svg: 'flower.svg' },
-        { name: 'basket', svg: 'basket.svg' },
-        { name: 'drag-drop', svg: 'drag-drop.svg' },
-        { name: 'notification-fill', svg: 'notification-fill.svg' },
-        { name: 'expense', svg: 'expense.svg' },
-        { name: 'income', svg: 'income.svg' },
-        { name: 'top-up', svg: 'top-up.svg' },
-        { name: 'signed-document', svg: 'signed-document.svg' },
-        { name: 'bank', svg: 'bank.svg' },
-        { name: 'balloon', svg: 'balloon.svg' },
-        { name: 'scale', svg: 'scale.svg' },
-        { name: 'ownership', svg: 'ownership.svg' },
-        { name: 'maintenance', svg: 'maintenance.svg' },
-        { name: 'blocked', svg: 'blocked.svg' },
-        { name: 'checklist', svg: 'checklist.svg' },
-        { name: 'collection', svg: 'collection.svg' },
-        { name: 'pause', svg: 'pause.svg' },
-        { name: 'payment-change', svg: 'payment-change.svg' },
-        { name: 'pregnancy', svg: 'pregnancy.svg' },
-        { name: 'send', svg: 'send.svg' },
-        { name: 'subscription', svg: 'subscription.svg' },
-    ]),
+	const collator = new Intl.Collator("en");
+	return icons.sort((a, b) => collator.compare(a.name, b.name));
 };
+const kirbyIconSettings = { icons: sortIconsByName([
+	{
+		name: "accounts-outline",
+		svg: "accounts-outline.svg"
+	},
+	{
+		name: "accounts",
+		svg: "accounts.svg"
+	},
+	{
+		name: "add",
+		svg: "add.svg"
+	},
+	{
+		name: "remove",
+		svg: "remove.svg"
+	},
+	{
+		name: "unsubscribe",
+		svg: "unsubscribe.svg"
+	},
+	{
+		name: "arrow-back",
+		svg: "arrow-back.svg"
+	},
+	{
+		name: "arrow-down",
+		svg: "arrow-down.svg"
+	},
+	{
+		name: "arrow-more",
+		svg: "arrow-more.svg"
+	},
+	{
+		name: "arrow-up",
+		svg: "arrow-up.svg"
+	},
+	{
+		name: "attach",
+		svg: "attach.svg"
+	},
+	{
+		name: "backspace",
+		svg: "backspace.svg"
+	},
+	{
+		name: "calendar",
+		svg: "calendar.svg"
+	},
+	{
+		name: "camera",
+		svg: "camera.svg"
+	},
+	{
+		name: "car",
+		svg: "car.svg"
+	},
+	{
+		name: "chainlink",
+		svg: "chainlink.svg"
+	},
+	{
+		name: "checkbox-outline",
+		svg: "checkbox-outline.svg"
+	},
+	{
+		name: "checkbox",
+		svg: "checkbox.svg"
+	},
+	{
+		name: "checkmark-selected",
+		svg: "checkmark-selected.svg"
+	},
+	{
+		name: "close",
+		svg: "close.svg"
+	},
+	{
+		name: "cog",
+		svg: "cog.svg"
+	},
+	{
+		name: "coinstack",
+		svg: "coinstack.svg"
+	},
+	{
+		name: "contact",
+		svg: "contact.svg"
+	},
+	{
+		name: "copy",
+		svg: "copy.svg"
+	},
+	{
+		name: "flag",
+		svg: "flag.svg"
+	},
+	{
+		name: "edit",
+		svg: "edit.svg"
+	},
+	{
+		name: "filter",
+		svg: "filter.svg"
+	},
+	{
+		name: "flash-off",
+		svg: "flash-off.svg"
+	},
+	{
+		name: "flash",
+		svg: "flash.svg"
+	},
+	{
+		name: "moneybag",
+		svg: "moneybag.svg"
+	},
+	{
+		name: "help",
+		svg: "help.svg"
+	},
+	{
+		name: "home",
+		svg: "home.svg"
+	},
+	{
+		name: "id-card",
+		svg: "id-card.svg"
+	},
+	{
+		name: "inbox",
+		svg: "inbox.svg"
+	},
+	{
+		name: "inbox-outline",
+		svg: "inbox-outline.svg"
+	},
+	{
+		name: "information",
+		svg: "information.svg"
+	},
+	{
+		name: "insurance",
+		svg: "insurance.svg"
+	},
+	{
+		name: "investment",
+		svg: "investment.svg"
+	},
+	{
+		name: "key",
+		svg: "key.svg"
+	},
+	{
+		name: "kirby",
+		svg: "kirby.svg"
+	},
+	{
+		name: "link",
+		svg: "link.svg"
+	},
+	{
+		name: "log-out",
+		svg: "log-out.svg"
+	},
+	{
+		name: "menu-outline",
+		svg: "menu-outline.svg"
+	},
+	{
+		name: "menu",
+		svg: "menu.svg"
+	},
+	{
+		name: "menu-no-decoration",
+		svg: "menu-no-decoration.svg"
+	},
+	{
+		name: "megaphone",
+		svg: "megaphone.svg"
+	},
+	{
+		name: "message-read",
+		svg: "message-read.svg"
+	},
+	{
+		name: "misc",
+		svg: "misc.svg"
+	},
+	{
+		name: "more",
+		svg: "more.svg"
+	},
+	{
+		name: "move",
+		svg: "move.svg"
+	},
+	{
+		name: "note",
+		svg: "note.svg"
+	},
+	{
+		name: "note-create",
+		svg: "note-create.svg"
+	},
+	{
+		name: "payment-card",
+		svg: "payment-card.svg"
+	},
+	{
+		name: "pension",
+		svg: "pension.svg"
+	},
+	{
+		name: "person-outline",
+		svg: "person-outline.svg"
+	},
+	{
+		name: "person",
+		svg: "person.svg"
+	},
+	{
+		name: "person-blocked",
+		svg: "person-blocked.svg"
+	},
+	{
+		name: "person-check",
+		svg: "person-check.svg"
+	},
+	{
+		name: "person-close",
+		svg: "person-close.svg"
+	},
+	{
+		name: "person-power",
+		svg: "person-power.svg"
+	},
+	{
+		name: "person-cloud",
+		svg: "person-cloud.svg"
+	},
+	{
+		name: "person-warning",
+		svg: "person-warning.svg"
+	},
+	{
+		name: "phone-device-pin",
+		svg: "phone-device-pin.svg"
+	},
+	{
+		name: "qr",
+		svg: "QR.svg"
+	},
+	{
+		name: "recurring",
+		svg: "recurring.svg"
+	},
+	{
+		name: "salary",
+		svg: "salary.svg"
+	},
+	{
+		name: "search",
+		svg: "search.svg"
+	},
+	{
+		name: "share",
+		svg: "share.svg"
+	},
+	{
+		name: "sort",
+		svg: "sort.svg"
+	},
+	{
+		name: "support",
+		svg: "support.svg"
+	},
+	{
+		name: "swap",
+		svg: "swap.svg"
+	},
+	{
+		name: "trash",
+		svg: "trash.svg"
+	},
+	{
+		name: "foreign-payment",
+		svg: "foreign-payment.svg"
+	},
+	{
+		name: "clock",
+		svg: "clock.svg"
+	},
+	{
+		name: "verify",
+		svg: "verify.svg"
+	},
+	{
+		name: "warning",
+		svg: "warning.svg"
+	},
+	{
+		name: "write-message",
+		svg: "write-message.svg"
+	},
+	{
+		name: "reorder",
+		svg: "reorder.svg"
+	},
+	{
+		name: "accident",
+		svg: "accident.svg"
+	},
+	{
+		name: "health",
+		svg: "health.svg"
+	},
+	{
+		name: "illness",
+		svg: "illness.svg"
+	},
+	{
+		name: "incapacity",
+		svg: "incapacity.svg"
+	},
+	{
+		name: "life",
+		svg: "life.svg"
+	},
+	{
+		name: "help-decoration",
+		svg: "help-decoration.svg"
+	},
+	{
+		name: "information-decoration",
+		svg: "information-decoration.svg"
+	},
+	{
+		name: "warning-decoration",
+		svg: "warning-decoration.svg"
+	},
+	{
+		name: "notification",
+		svg: "notification.svg"
+	},
+	{
+		name: "transfer-ownership",
+		svg: "transfer-ownership.svg"
+	},
+	{
+		name: "update",
+		svg: "update.svg"
+	},
+	{
+		name: "user-blocked",
+		svg: "user-blocked.svg"
+	},
+	{
+		name: "add-bank",
+		svg: "add-bank.svg"
+	},
+	{
+		name: "participants",
+		svg: "participants.svg"
+	},
+	{
+		name: "download",
+		svg: "download.svg"
+	},
+	{
+		name: "globe-transfer",
+		svg: "globe-transfer.svg"
+	},
+	{
+		name: "banknotes",
+		svg: "banknotes.svg"
+	},
+	{
+		name: "air-balloon",
+		svg: "air-balloon.svg"
+	},
+	{
+		name: "piggybank",
+		svg: "piggybank.svg"
+	},
+	{
+		name: "business",
+		svg: "business.svg"
+	},
+	{
+		name: "navigation",
+		svg: "navigation.svg"
+	},
+	{
+		name: "phone-device",
+		svg: "phone-device.svg"
+	},
+	{
+		name: "upload",
+		svg: "upload.svg"
+	},
+	{
+		name: "document",
+		svg: "document.svg"
+	},
+	{
+		name: "chat",
+		svg: "chat.svg"
+	},
+	{
+		name: "feedback",
+		svg: "feedback.svg"
+	},
+	{
+		name: "keyboard",
+		svg: "keyboard.svg"
+	},
+	{
+		name: "lock",
+		svg: "lock.svg"
+	},
+	{
+		name: "see",
+		svg: "see.svg"
+	},
+	{
+		name: "overview",
+		svg: "overview.svg"
+	},
+	{
+		name: "overview-outline",
+		svg: "overview-outline.svg"
+	},
+	{
+		name: "arrow-down-fill",
+		svg: "arrow-down-fill.svg"
+	},
+	{
+		name: "arrow-up-fill",
+		svg: "arrow-up-fill.svg"
+	},
+	{
+		name: "calculator",
+		svg: "calculator.svg"
+	},
+	{
+		name: "grid",
+		svg: "grid.svg"
+	},
+	{
+		name: "list",
+		svg: "list.svg"
+	},
+	{
+		name: "adjust",
+		svg: "adjust.svg"
+	},
+	{
+		name: "bs-logo",
+		svg: "bs-logo.svg"
+	},
+	{
+		name: "company",
+		svg: "company.svg"
+	},
+	{
+		name: "budget",
+		svg: "budget.svg"
+	},
+	{
+		name: "history",
+		svg: "history.svg"
+	},
+	{
+		name: "dot",
+		svg: "dot.svg"
+	},
+	{
+		name: "agreement",
+		svg: "agreement.svg"
+	},
+	{
+		name: "sunshine",
+		svg: "sunshine.svg"
+	},
+	{
+		name: "star",
+		svg: "star.svg"
+	},
+	{
+		name: "star-fill",
+		svg: "star-fill.svg"
+	},
+	{
+		name: "payment",
+		svg: "payment.svg"
+	},
+	{
+		name: "revert",
+		svg: "revert.svg"
+	},
+	{
+		name: "fees",
+		svg: "fees.svg"
+	},
+	{
+		name: "crossedeye",
+		svg: "crossedeye.svg"
+	},
+	{
+		name: "common",
+		svg: "common.svg"
+	},
+	{
+		name: "calendar-start",
+		svg: "calendar-start.svg"
+	},
+	{
+		name: "calendar-end",
+		svg: "calendar-end.svg"
+	},
+	{
+		name: "expand",
+		svg: "expand.svg"
+	},
+	{
+		name: "contract",
+		svg: "contract.svg"
+	},
+	{
+		name: "house",
+		svg: "house.svg"
+	},
+	{
+		name: "tractor",
+		svg: "tractor.svg"
+	},
+	{
+		name: "flower",
+		svg: "flower.svg"
+	},
+	{
+		name: "basket",
+		svg: "basket.svg"
+	},
+	{
+		name: "drag-drop",
+		svg: "drag-drop.svg"
+	},
+	{
+		name: "notification-fill",
+		svg: "notification-fill.svg"
+	},
+	{
+		name: "expense",
+		svg: "expense.svg"
+	},
+	{
+		name: "income",
+		svg: "income.svg"
+	},
+	{
+		name: "top-up",
+		svg: "top-up.svg"
+	},
+	{
+		name: "signed-document",
+		svg: "signed-document.svg"
+	},
+	{
+		name: "bank",
+		svg: "bank.svg"
+	},
+	{
+		name: "balloon",
+		svg: "balloon.svg"
+	},
+	{
+		name: "scale",
+		svg: "scale.svg"
+	},
+	{
+		name: "ownership",
+		svg: "ownership.svg"
+	},
+	{
+		name: "maintenance",
+		svg: "maintenance.svg"
+	},
+	{
+		name: "blocked",
+		svg: "blocked.svg"
+	},
+	{
+		name: "checklist",
+		svg: "checklist.svg"
+	},
+	{
+		name: "collection",
+		svg: "collection.svg"
+	},
+	{
+		name: "pause",
+		svg: "pause.svg"
+	},
+	{
+		name: "payment-change",
+		svg: "payment-change.svg"
+	},
+	{
+		name: "pregnancy",
+		svg: "pregnancy.svg"
+	},
+	{
+		name: "send",
+		svg: "send.svg"
+	},
+	{
+		name: "subscription",
+		svg: "subscription.svg"
+	}
+]) };
 const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);
-
-const DEFAULT_BUILT_IN_ICONS_URL = 'assets/kirby/icons/svg/';
-/**
- * Token used to configure base URL for path to built-in icons. Default is 'assets/kirby/icons/svg'.
- */
-const BUILT_IN_ICONS_URL = new InjectionToken('BUILT_IN_ICONS_URL', {
-    factory: () => DEFAULT_BUILT_IN_ICONS_URL,
+const DEFAULT_BUILT_IN_ICONS_URL = "assets/kirby/icons/svg/";
+const BUILT_IN_ICONS_URL = new InjectionToken("BUILT_IN_ICONS_URL", { factory: () => DEFAULT_BUILT_IN_ICONS_URL });
+var IconRegistryService = class IconRegistryService {
+	constructor(builtInIconsUrl) {
+		this.builtInIconsUrl = builtInIconsUrl;
+		this.iconRegistry = /* @__PURE__ */ new Map();
+		this.addDefaultIcons();
+	}
+	addIcon(iconName, svgPath) {
+		if (!this.iconRegistry.has(iconName)) this.iconRegistry.set(iconName, svgPath);
+		else console.warn(`Icon with name: "${iconName}" already exists`);
+	}
+	addIcons(icons) {
+		if (!icons) {
+			console.error("Icons not defined");
+			return;
+		}
+		icons.forEach((icon) => {
+			if (icon.name && icon.svg) this.addIcon(icon.name, icon.svg);
+		});
+	}
+	addDefaultIcons() {
+		const baseUrl = this.builtInIconsUrl ?? "assets/kirby/icons/svg/";
+		const baseUrlWithSlash = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
+		this.addIcons(kirbyIconSettings.icons.map((icon) => ({
+			name: icon.name,
+			svg: baseUrlWithSlash + icon.svg
+		})));
+	}
+	getIcons() {
+		return Array.from(this.iconRegistry.keys()).map((key) => this.getIcon(key)).filter((icon) => !!icon);
+	}
+	getIcon(name) {
+		const svg = this.iconRegistry.get(name);
+		return svg ? {
+			name,
+			svg
+		} : void 0;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: IconRegistryService,
+			deps: [{ token: BUILT_IN_ICONS_URL }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: IconRegistryService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: IconRegistryService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{
+			type: Inject,
+			args: [BUILT_IN_ICONS_URL]
+		}]
+	}]
 });
-class IconRegistryService {
-    constructor(builtInIconsUrl) {
-        this.builtInIconsUrl = builtInIconsUrl;
-        this.iconRegistry = new Map();
-        this.addDefaultIcons();
-    }
-    addIcon(iconName, svgPath) {
-        if (!this.iconRegistry.has(iconName)) {
-            this.iconRegistry.set(iconName, svgPath);
-        }
-        else {
-            console.warn(`Icon with name: "${iconName}" already exists`);
-        }
-    }
-    addIcons(icons) {
-        if (!icons) {
-            console.error('Icons not defined');
-            return;
-        }
-        icons.forEach((icon) => {
-            this.addIcon(icon.name, icon.svg);
-        });
-    }
-    addDefaultIcons() {
-        const baseUrl = this.builtInIconsUrl ?? DEFAULT_BUILT_IN_ICONS_URL;
-        const baseUrlWithSlash = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';
-        this.addIcons(kirbyIconSettings.icons.map((icon) => ({ name: icon.name, svg: baseUrlWithSlash + icon.svg })));
-    }
-    getIcons() {
-        return Array.from(this.iconRegistry.keys()).map((key) => this.getIcon(key));
-    }
-    getIcon(name) {
-        const svg = this.iconRegistry.get(name);
-        return svg ? { name, svg } : undefined;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IconRegistryService, deps: [{ token: BUILT_IN_ICONS_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IconRegistryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IconRegistryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [BUILT_IN_ICONS_URL]
-                }] }] });
-
 var IconSize;
-(function (IconSize) {
-    IconSize["XS"] = "xs";
-    IconSize["SM"] = "sm";
-    IconSize["MD"] = "md";
-    IconSize["LG"] = "lg";
+(function(IconSize) {
+	IconSize["XS"] = "xs";
+	IconSize["SM"] = "sm";
+	IconSize["MD"] = "md";
+	IconSize["LG"] = "lg";
 })(IconSize || (IconSize = {}));
-class IconComponent {
-    get icon() {
-        return this._icon;
-    }
-    set icon(icon) {
-        // If icon are not found, set default icon
-        if (!icon && this.name) {
-            this.warnAboutMissingIcon();
-            icon = this.defaultIcon;
-            // If default icon are not found
-            if (!icon) {
-                console.warn('Default icon was not found.');
-                return;
-            }
-        }
-        // Set icon if it's found
-        if (icon) {
-            this._icon = icon;
-        }
-    }
-    warnAboutMissingIcon() {
-        console.warn(`Icon with name "${this.name}" was not found.
+var IconComponent = class IconComponent {
+	get icon() {
+		return this._icon;
+	}
+	set icon(icon) {
+		if (!icon && this.name) {
+			this.warnAboutMissingIcon();
+			icon = this.defaultIcon;
+			if (!icon) {
+				console.warn("Default icon was not found.");
+				return;
+			}
+		}
+		if (icon) this._icon = icon;
+	}
+	warnAboutMissingIcon() {
+		console.warn(`Icon with name "${this.name}" was not found.
 Do you have a typo in 'name' for a built-in icon or
 forgot to configure the custom icon through the 'IconRegistryService'?`);
-    }
-    constructor(iconRegistryService, elementRef, renderer) {
-        this.iconRegistryService = iconRegistryService;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.defaultIcon = this.iconRegistryService.getIcon('cog');
-        this._icon = (this.icon = this.defaultIcon);
-        this.element = this.elementRef.nativeElement;
-    }
-    ngOnChanges(changes) {
-        if (changes.name && changes.name.currentValue) {
-            this.icon = this.iconRegistryService.getIcon(changes.name.currentValue);
-            // This will always run on first init - and again later if name is changed
-            // If name changes a new aria-label might have been added, so we need to check again.
-            this.setAriaHiddenIfNoLabel();
-        }
-    }
-    setAriaHiddenIfNoLabel() {
-        const existingAriaLabel = this.element.hasAttribute('aria-label');
-        if (!existingAriaLabel) {
-            this.renderer.setAttribute(this.element, 'aria-hidden', 'true');
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IconComponent, deps: [{ token: IconRegistryService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: IconComponent, isStandalone: true, selector: "kirby-icon", inputs: { size: "size", name: "name" }, host: { properties: { "class.kirby-icon": "true", "class": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, var(--kirby-icon-font-size-sm));margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: var(--kirby-icon-font-size-xs)}:host(.sm){--kirby-icon-font-size: var(--kirby-icon-font-size-sm)}:host(.md){--kirby-icon-font-size: var(--kirby-icon-font-size-md)}:host(.lg){--kirby-icon-font-size: var(--kirby-icon-font-size-lg)}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xxs)}:host-context(kirby-item)[slot=end]{margin-inline-start:var(--kirby-spacing-xxs)}:host-context(ion-tab-button){pointer-events:none}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-icon', host: { '[class.kirby-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonIcon], template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, var(--kirby-icon-font-size-sm));margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: var(--kirby-icon-font-size-xs)}:host(.sm){--kirby-icon-font-size: var(--kirby-icon-font-size-sm)}:host(.md){--kirby-icon-font-size: var(--kirby-icon-font-size-md)}:host(.lg){--kirby-icon-font-size: var(--kirby-icon-font-size-lg)}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xxs)}:host-context(kirby-item)[slot=end]{margin-inline-start:var(--kirby-spacing-xxs)}:host-context(ion-tab-button){pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: IconRegistryService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { size: [{
-                type: HostBinding,
-                args: ['class']
-            }, {
-                type: Input
-            }], name: [{
-                type: Input
-            }] } });
-
-class IconModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IconModule, imports: [ThemeColorDirective, IonIcon, IconComponent], exports: [IconComponent, ThemeColorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IconModule, imports: [IonIcon, IconComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ThemeColorDirective, IonIcon, IconComponent],
-                    exports: [IconComponent, ThemeColorDirective],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+	}
+	constructor(iconRegistryService, elementRef, renderer) {
+		this.iconRegistryService = iconRegistryService;
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.defaultIcon = this.iconRegistryService.getIcon("cog");
+		this._icon = this.icon = this.defaultIcon;
+		this.element = this.elementRef.nativeElement;
+	}
+	ngOnChanges(changes) {
+		if (changes.name && changes.name.currentValue) {
+			this.icon = this.iconRegistryService.getIcon(changes.name.currentValue);
+			this.setAriaHiddenIfNoLabel();
+		}
+	}
+	setAriaHiddenIfNoLabel() {
+		if (!this.element.hasAttribute("aria-label")) this.renderer.setAttribute(this.element, "aria-hidden", "true");
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: IconComponent,
+			deps: [
+				{ token: IconRegistryService },
+				{ token: i0.ElementRef },
+				{ token: i0.Renderer2 }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: IconComponent,
+			isStandalone: true,
+			selector: "kirby-icon",
+			inputs: {
+				size: "size",
+				name: "name"
+			},
+			host: { properties: {
+				"class.kirby-icon": "true",
+				"class": "this.size"
+			} },
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n",
+			styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, var(--kirby-icon-font-size-sm));margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: var(--kirby-icon-font-size-xs)}:host(.sm){--kirby-icon-font-size: var(--kirby-icon-font-size-sm)}:host(.md){--kirby-icon-font-size: var(--kirby-icon-font-size-md)}:host(.lg){--kirby-icon-font-size: var(--kirby-icon-font-size-lg)}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-color-fill-success-loud)}:host(.warning){color:var(--kirby-color-fill-warning-loud)}:host(.danger){color:var(--kirby-color-fill-danger-loud)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-color-content-base-quiet)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xxs)}:host-context(kirby-item)[slot=end]{margin-inline-start:var(--kirby-spacing-xxs)}:host-context(ion-tab-button){pointer-events:none}\n"],
+			dependencies: [{
+				kind: "component",
+				type: IonIcon,
+				selector: "ion-icon",
+				inputs: [
+					"color",
+					"flipRtl",
+					"icon",
+					"ios",
+					"lazy",
+					"md",
+					"mode",
+					"name",
+					"sanitize",
+					"size",
+					"src"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: IconComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-icon",
+			host: { "[class.kirby-icon]": "true" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [IonIcon],
+			template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n",
+			styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, var(--kirby-icon-font-size-sm));margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: var(--kirby-icon-font-size-xs)}:host(.sm){--kirby-icon-font-size: var(--kirby-icon-font-size-sm)}:host(.md){--kirby-icon-font-size: var(--kirby-icon-font-size-md)}:host(.lg){--kirby-icon-font-size: var(--kirby-icon-font-size-lg)}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-color-fill-success-loud)}:host(.warning){color:var(--kirby-color-fill-warning-loud)}:host(.danger){color:var(--kirby-color-fill-danger-loud)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-color-content-base-quiet)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xxs)}:host-context(kirby-item)[slot=end]{margin-inline-start:var(--kirby-spacing-xxs)}:host-context(ion-tab-button){pointer-events:none}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: IconRegistryService },
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 }
+	],
+	propDecorators: {
+		size: [{
+			type: HostBinding,
+			args: ["class"]
+		}, { type: Input }],
+		name: [{ type: Input }]
+	}
+});
+var IconModule = class IconModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: IconModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: IconModule,
+			imports: [
+				ThemeColorDirective,
+				IonIcon,
+				IconComponent
+			],
+			exports: [IconComponent, ThemeColorDirective]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: IconModule,
+			imports: [IonIcon, IconComponent]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: IconModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				ThemeColorDirective,
+				IonIcon,
+				IconComponent
+			],
+			exports: [IconComponent, ThemeColorDirective]
+		}]
+	}]
+});
 export { BUILT_IN_ICONS_URL, DEFAULT_BUILT_IN_ICONS_URL, IconComponent, IconModule, IconRegistryService, IconSize, defaultIcons, kirbyIconSettings };
-//# sourceMappingURL=kirbydesign-designsystem-icon.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-icon.mjs.map