@kirbydesign/extensions-angular 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -4
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs +10 -9
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-localization.mjs +419 -0
- package/fesm2022/kirbydesign-extensions-angular-localization.mjs.map +1 -0
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs +42 -0
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs.map +1 -0
- package/image-banner/image-banner.component.d.ts +4 -1
- package/localization/account-number/account-number-service-formatter.d.ts +2 -0
- package/localization/account-number/account-number.model.d.ts +4 -0
- package/localization/account-number/account-number.pipe.d.ts +16 -0
- package/localization/account-number/index.d.ts +3 -0
- package/localization/amount/amount-service-formatter.d.ts +32 -0
- package/localization/amount/amount.model.d.ts +14 -0
- package/localization/amount/amount.pipe.d.ts +31 -0
- package/localization/amount/amount.service.d.ts +18 -0
- package/localization/amount/index.d.ts +4 -0
- package/localization/date-time/abstract-timezone-compensating.pipe.d.ts +13 -0
- package/localization/date-time/date-formats.d.ts +8 -0
- package/localization/date-time/date-only/date-only.pipe.d.ts +11 -0
- package/localization/date-time/index.d.ts +4 -0
- package/localization/date-time/time-only/time-only.pipe.d.ts +18 -0
- package/localization/date-time/time-or-date/time-or-date.pipe.d.ts +16 -0
- package/localization/di-tokens.d.ts +28 -0
- package/localization/index.d.ts +6 -0
- package/localization/number/format-number.pipe.d.ts +10 -0
- package/localization/number/format-number.service.d.ts +8 -0
- package/localization/number/index.d.ts +2 -0
- package/localization/phone-number/index.d.ts +3 -0
- package/localization/phone-number/phone-number.d.ts +4 -0
- package/localization/phone-number/phone-number.pipe.d.ts +18 -0
- package/localization/phone-number/phone-number.service.d.ts +10 -0
- package/package.json +17 -13
- package/skeleton-loader/index.d.ts +1 -0
- package/skeleton-loader/skeleton-loader.component.d.ts +14 -0
- package/esm2022/image-banner/image-banner.component.mjs +0 -62
- package/esm2022/image-banner/index.mjs +0 -2
- package/esm2022/image-banner/kirbydesign-extensions-angular-image-banner.mjs +0 -5
- package/esm2022/index.mjs +0 -5
- package/esm2022/kirbydesign-extensions-angular.mjs +0 -5
package/README.md
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
# Kirby Extensions Angular
|
|
2
2
|
The Kirby Extensions library is a collection of design guidelines and components that build on top of the core Kirby Design library.
|
|
3
|
-
The components follow the Kirby Design guidelines, but they differ from the core components by being
|
|
4
|
-
This means that components in this library
|
|
5
|
-
Though some components can also become core-candidates and graduate once they are battle-tested and initial experimentation is over.
|
|
3
|
+
The components follow the Kirby Design guidelines, but they differ from the core components by being built by the community, often with specific product-needs or requirements in mind.
|
|
4
|
+
This means that components in this library might not be universally useful to everyone, though some components can also become core-candidates and graduate once they are battle-tested and initial experimentation is over.
|
|
6
5
|
|
|
7
6
|
Extensions allow for quicker iteration and less focus on generalising behavior, while the test and especially documentation burden is also significantly lower.
|
|
8
7
|
|
|
9
|
-
Components in this library are developed and maintained by
|
|
8
|
+
Components in this library are developed and maintained by the community, with support from [Team Kirby](https://github.com/kirbydesign/designsystem/blob/develop/.github/SUPPORT.md#team-kirby).
|
|
10
9
|
|
|
11
10
|
## Using Kirby Extensions
|
|
12
11
|
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import * as i4 from '@angular/common';
|
|
2
|
-
import { CommonModule
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { EventEmitter, Component, Input, HostBinding, Output } from '@angular/core';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i2 from '@kirbydesign/designsystem/card';
|
|
6
6
|
import { CardModule } from '@kirbydesign/designsystem/card';
|
|
7
7
|
import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
8
8
|
import * as i3 from '@kirbydesign/designsystem/icon';
|
|
9
9
|
import { IconModule } from '@kirbydesign/designsystem/icon';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i1 from '@kirbydesign/designsystem/shared';
|
|
11
11
|
|
|
12
12
|
class ImageBannerComponent {
|
|
13
|
-
constructor() {
|
|
13
|
+
constructor(translations) {
|
|
14
|
+
this.translations = translations;
|
|
14
15
|
/**
|
|
15
16
|
* The blur-effect used for the background.
|
|
16
17
|
*/
|
|
@@ -34,13 +35,13 @@ class ImageBannerComponent {
|
|
|
34
35
|
dismissClicked(event) {
|
|
35
36
|
this.dismissClick.emit(event);
|
|
36
37
|
}
|
|
37
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
38
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ImageBannerComponent, deps: [{ token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick" }, host: { properties: { "class": "this.backgroundBlur" } }, ngImport: i0, template: "<kirby-card *ngIf=\"externalLink\" [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\">\n <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<kirby-card\n *ngIf=\"!externalLink\"\n [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\"\n (click)=\"bannerClicked($event)\"\n>\n <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<ng-template #sharedCardContent>\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <!-- When an external link is supplied, this anchor tag expands and fills the entire banner so users can click anywhere or focus the banner -->\n <a *ngIf=\"externalLink\" class=\"main-content-anchor\" [href]=\"externalLink\" target=\"_blank\"></a>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"main-content-header\">\n <p class=\"kirby-text-normal-bold header-text\">\n @if (title) {\n {{ title }}\n } @else {\n <ng-content select=\"[title]\"></ng-content>\n }\n </p>\n </div>\n\n <div class=\"main-content-body\">\n <div class=\"main-content-body-text\">\n <span class=\"kirby-text-small body-text\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </span>\n </div>\n\n <ng-container *ngIf=\"externalLink\">\n <!-- On large screens we also show a button-like anchor tag in addition to the entire banner anchor -->\n <a\n kirby-button\n class=\"main-content-body-action-text\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"!actionButtonText\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <div class=\"main-content-body-action-link\">\n <kirby-icon name=\"link\"></kirby-icon>\n </div>\n </ng-container>\n\n <button\n class=\"main-content-body-action-text\"\n kirby-button\n *ngIf=\"actionButtonText && !externalLink\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dismiss\" *ngIf=\"dismissClick.observed\">\n <button\n kirby-button\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"true\"\n size=\"xs\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n </div>\n</ng-template>\n", styles: [":host{display:block;container-name:banner;container-type:inline-size}: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(60px) brightness(.8)}:host(.light) .blur-image{filter:blur(60px) brightness(1.3)}.blur-image-wrapper{position:absolute;inset:-180px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}kirby-card{height:100%}.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;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;flex-direction:column;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}.main-content:has(.header-text:empty):has(.body-text:empty){padding-block-start:0}.main-content:has(.body-text:empty):has(.header-text:empty){padding-block-end:0}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom: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;justify-content:space-between;gap:16px;height:100%}@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:block;overflow:hidden;max-height:40px;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@container banner (width >= 600px){.main-content-body-action-text{align-self:start;display:inline-flex;margin:0}}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i2.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "directive", type: i2.CardAsButtonDirective, selector: "kirby-card[click]" }, { 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: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
39
40
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ImageBannerComponent, decorators: [{
|
|
41
42
|
type: Component,
|
|
42
|
-
args: [{ selector: 'kirby-x-image-banner',
|
|
43
|
-
}], propDecorators: { title: [{
|
|
43
|
+
args: [{ selector: 'kirby-x-image-banner', imports: [CardModule, ButtonComponent, IconModule, CommonModule], template: "<kirby-card *ngIf=\"externalLink\" [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\">\n <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<kirby-card\n *ngIf=\"!externalLink\"\n [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\"\n (click)=\"bannerClicked($event)\"\n>\n <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<ng-template #sharedCardContent>\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <!-- When an external link is supplied, this anchor tag expands and fills the entire banner so users can click anywhere or focus the banner -->\n <a *ngIf=\"externalLink\" class=\"main-content-anchor\" [href]=\"externalLink\" target=\"_blank\"></a>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"main-content-header\">\n <p class=\"kirby-text-normal-bold header-text\">\n @if (title) {\n {{ title }}\n } @else {\n <ng-content select=\"[title]\"></ng-content>\n }\n </p>\n </div>\n\n <div class=\"main-content-body\">\n <div class=\"main-content-body-text\">\n <span class=\"kirby-text-small body-text\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </span>\n </div>\n\n <ng-container *ngIf=\"externalLink\">\n <!-- On large screens we also show a button-like anchor tag in addition to the entire banner anchor -->\n <a\n kirby-button\n class=\"main-content-body-action-text\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"!actionButtonText\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <div class=\"main-content-body-action-link\">\n <kirby-icon name=\"link\"></kirby-icon>\n </div>\n </ng-container>\n\n <button\n class=\"main-content-body-action-text\"\n kirby-button\n *ngIf=\"actionButtonText && !externalLink\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dismiss\" *ngIf=\"dismissClick.observed\">\n <button\n kirby-button\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"true\"\n size=\"xs\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n </div>\n</ng-template>\n", styles: [":host{display:block;container-name:banner;container-type:inline-size}: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(60px) brightness(.8)}:host(.light) .blur-image{filter:blur(60px) brightness(1.3)}.blur-image-wrapper{position:absolute;inset:-180px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}kirby-card{height:100%}.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;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;flex-direction:column;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}.main-content:has(.header-text:empty):has(.body-text:empty){padding-block-start:0}.main-content:has(.body-text:empty):has(.header-text:empty){padding-block-end:0}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom: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;justify-content:space-between;gap:16px;height:100%}@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:block;overflow:hidden;max-height:40px;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@container banner (width >= 600px){.main-content-body-action-text{align-self:start;display:inline-flex;margin:0}}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}\n"] }]
|
|
44
|
+
}], ctorParameters: () => [{ type: i1.TranslationService }], propDecorators: { title: [{
|
|
44
45
|
type: Input
|
|
45
46
|
}], imagePath: [{
|
|
46
47
|
type: Input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../../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 { CommonModule
|
|
1
|
+
{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../../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 { CommonModule } from '@angular/common';\nimport { 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 { TranslationService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-x-image-banner',\n imports: [CardModule, ButtonComponent, IconModule, CommonModule],\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 * The text of the button in the content area of the image banner.\n */\n @Input() actionButtonText: string | undefined;\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 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","<kirby-card *ngIf=\"externalLink\" [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\">\n <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<kirby-card\n *ngIf=\"!externalLink\"\n [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\"\n (click)=\"bannerClicked($event)\"\n>\n <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<ng-template #sharedCardContent>\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <!-- When an external link is supplied, this anchor tag expands and fills the entire banner so users can click anywhere or focus the banner -->\n <a *ngIf=\"externalLink\" class=\"main-content-anchor\" [href]=\"externalLink\" target=\"_blank\"></a>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"main-content-header\">\n <p class=\"kirby-text-normal-bold header-text\">\n @if (title) {\n {{ title }}\n } @else {\n <ng-content select=\"[title]\"></ng-content>\n }\n </p>\n </div>\n\n <div class=\"main-content-body\">\n <div class=\"main-content-body-text\">\n <span class=\"kirby-text-small body-text\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </span>\n </div>\n\n <ng-container *ngIf=\"externalLink\">\n <!-- On large screens we also show a button-like anchor tag in addition to the entire banner anchor -->\n <a\n kirby-button\n class=\"main-content-body-action-text\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"!actionButtonText\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <div class=\"main-content-body-action-link\">\n <kirby-icon name=\"link\"></kirby-icon>\n </div>\n </ng-container>\n\n <button\n class=\"main-content-body-action-text\"\n kirby-button\n *ngIf=\"actionButtonText && !externalLink\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dismiss\" *ngIf=\"dismissClick.observed\">\n <button\n kirby-button\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"true\"\n size=\"xs\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, LOCALE_ID, Pipe, Injectable, Inject } from '@angular/core';
|
|
3
|
+
import { formatNumber } from '@angular/common';
|
|
4
|
+
|
|
5
|
+
class DateFormats {
|
|
6
|
+
static { this.SHORT_DATE_FORMAT = 'dd.MM.yyyy'; }
|
|
7
|
+
static { this.MEDIUM_DATE_FORMAT = 'd. MMMM y'; }
|
|
8
|
+
static { this.MEDIUM_LETTER_DATE_FORMAT = 'dd. MMM yyyy'; }
|
|
9
|
+
static { this.SHORT_TIME_FORMAT = 'HH:mm'; }
|
|
10
|
+
static { this.MEDIUM_TIME_FORMAT = 'HH:mm:ss'; }
|
|
11
|
+
static { this.SHORT_DATE_MEDIUM_TIME_FORMAT = `${DateFormats.SHORT_DATE_FORMAT} ${DateFormats.MEDIUM_TIME_FORMAT}`; }
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const KIRBY_EXTENSIONS_LOCALIZATION_TOKEN = new InjectionToken('KIRBY_EXTENSIONS_LOCALIZATION_TOKEN');
|
|
15
|
+
function provideKirbyExtensionsLocalizationToken(factory) {
|
|
16
|
+
return {
|
|
17
|
+
provide: KIRBY_EXTENSIONS_LOCALIZATION_TOKEN,
|
|
18
|
+
useFactory: factory,
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Abstract implementation of pipe that should format dates, and compensate for time-zone offset.
|
|
24
|
+
*
|
|
25
|
+
* This class provides tools for formatting dates (and timestamps) in a time zone
|
|
26
|
+
*/
|
|
27
|
+
class AbstractTimezoneCompensatingPipe {
|
|
28
|
+
constructor() {
|
|
29
|
+
this.config = inject(KIRBY_EXTENSIONS_LOCALIZATION_TOKEN);
|
|
30
|
+
this.locale = inject(LOCALE_ID);
|
|
31
|
+
}
|
|
32
|
+
format(time, formatPattern) {
|
|
33
|
+
if (!time) {
|
|
34
|
+
return '';
|
|
35
|
+
}
|
|
36
|
+
const date = typeof time === 'number' ? new Date(time) : time;
|
|
37
|
+
const timeZone = this.config.timeZone;
|
|
38
|
+
const options = this.getIntlOptions(formatPattern);
|
|
39
|
+
const formatter = new Intl.DateTimeFormat(this.locale, { ...options, timeZone });
|
|
40
|
+
let formattedDate = formatter.format(date);
|
|
41
|
+
// Capitalize month abbreviation and remove trailing period for `MEDIUM_LETTER_DATE_FORMAT`
|
|
42
|
+
if (formatPattern === DateFormats.MEDIUM_LETTER_DATE_FORMAT) {
|
|
43
|
+
formattedDate = formattedDate.replace(/(\d{2}\.\s)(\w+)\.(\s\d{4})/, (_, day, month, year) => {
|
|
44
|
+
return `${day}${month.charAt(0).toUpperCase()}${month.slice(1)}${year}`;
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
if (formatPattern === DateFormats.SHORT_TIME_FORMAT ||
|
|
48
|
+
formatPattern === DateFormats.MEDIUM_TIME_FORMAT) {
|
|
49
|
+
formattedDate = formattedDate.replace(/\./g, ':');
|
|
50
|
+
}
|
|
51
|
+
return formattedDate;
|
|
52
|
+
}
|
|
53
|
+
getIntlOptions(formatPattern) {
|
|
54
|
+
switch (formatPattern) {
|
|
55
|
+
case DateFormats.SHORT_DATE_FORMAT:
|
|
56
|
+
return { year: 'numeric', month: '2-digit', day: '2-digit' };
|
|
57
|
+
case DateFormats.MEDIUM_DATE_FORMAT:
|
|
58
|
+
return { year: 'numeric', month: 'long', day: 'numeric' };
|
|
59
|
+
case DateFormats.MEDIUM_LETTER_DATE_FORMAT:
|
|
60
|
+
return {
|
|
61
|
+
year: 'numeric',
|
|
62
|
+
month: 'short',
|
|
63
|
+
day: '2-digit',
|
|
64
|
+
};
|
|
65
|
+
case DateFormats.SHORT_TIME_FORMAT:
|
|
66
|
+
return { hour: '2-digit', minute: '2-digit', hour12: false };
|
|
67
|
+
case DateFormats.MEDIUM_TIME_FORMAT:
|
|
68
|
+
return { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
|
|
69
|
+
case DateFormats.SHORT_DATE_MEDIUM_TIME_FORMAT:
|
|
70
|
+
return {
|
|
71
|
+
year: 'numeric',
|
|
72
|
+
month: '2-digit',
|
|
73
|
+
day: '2-digit',
|
|
74
|
+
hour: '2-digit',
|
|
75
|
+
minute: '2-digit',
|
|
76
|
+
second: '2-digit',
|
|
77
|
+
hour12: false,
|
|
78
|
+
};
|
|
79
|
+
default:
|
|
80
|
+
throw new Error(`Unsupported format pattern: ${formatPattern}`);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Formats a given timestamp as a date.
|
|
87
|
+
*/
|
|
88
|
+
class DateOnlyPipe extends AbstractTimezoneCompensatingPipe {
|
|
89
|
+
transform(input) {
|
|
90
|
+
return this.format(input, DateFormats.SHORT_DATE_FORMAT);
|
|
91
|
+
}
|
|
92
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DateOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
93
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DateOnlyPipe, isStandalone: true, name: "dateOnly" }); }
|
|
94
|
+
}
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DateOnlyPipe, decorators: [{
|
|
96
|
+
type: Pipe,
|
|
97
|
+
args: [{
|
|
98
|
+
name: 'dateOnly',
|
|
99
|
+
standalone: true,
|
|
100
|
+
}]
|
|
101
|
+
}] });
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Formats a given timestamp as a time.
|
|
105
|
+
*
|
|
106
|
+
* Timestamps can be formatted as 2 variants:
|
|
107
|
+
* - 'short' being 'HH:mm' (hours and minutes)
|
|
108
|
+
* - 'medium' being 'HH:mm:ss' (as above, but with seconds appended)
|
|
109
|
+
*
|
|
110
|
+
*/
|
|
111
|
+
class TimeOnlyPipe extends AbstractTimezoneCompensatingPipe {
|
|
112
|
+
transform(input, format = 'short') {
|
|
113
|
+
return this.format(input, this.getFormat(format));
|
|
114
|
+
}
|
|
115
|
+
getFormat(format) {
|
|
116
|
+
switch (format) {
|
|
117
|
+
case 'short':
|
|
118
|
+
return DateFormats.SHORT_TIME_FORMAT;
|
|
119
|
+
case 'medium':
|
|
120
|
+
return DateFormats.MEDIUM_TIME_FORMAT;
|
|
121
|
+
default:
|
|
122
|
+
throw new Error(`Unable to derive format from "${format}"`);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TimeOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
126
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: TimeOnlyPipe, isStandalone: true, name: "timeOnly" }); }
|
|
127
|
+
}
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TimeOnlyPipe, decorators: [{
|
|
129
|
+
type: Pipe,
|
|
130
|
+
args: [{
|
|
131
|
+
name: 'timeOnly',
|
|
132
|
+
standalone: true,
|
|
133
|
+
}]
|
|
134
|
+
}] });
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Formats a given timestamp so that:
|
|
138
|
+
* - If timestamp is of "today", it's formatted as time with hours and minutes (eg. 23:56)
|
|
139
|
+
* - If timestamp is different from "today", it's formatted as date with "day of month", month and year (eg. 28.02.2020)
|
|
140
|
+
*
|
|
141
|
+
* All formatting and parsing is expect to be handled in "Europe/Copenhagen" time zone and with
|
|
142
|
+
* the locale provided by `LOCALE_ID`.
|
|
143
|
+
*/
|
|
144
|
+
class TimeOrDatePipe extends AbstractTimezoneCompensatingPipe {
|
|
145
|
+
transform(time, showSeconds = false, formatMonth = 'month-as-digits') {
|
|
146
|
+
if (!time) {
|
|
147
|
+
return '';
|
|
148
|
+
}
|
|
149
|
+
const date = typeof time === 'number' ? new Date(time) : time;
|
|
150
|
+
const today = new Date();
|
|
151
|
+
const sameDay = date.getFullYear() === today.getFullYear() &&
|
|
152
|
+
date.getMonth() === today.getMonth() &&
|
|
153
|
+
date.getDate() === today.getDate();
|
|
154
|
+
let format = DateFormats.SHORT_DATE_FORMAT;
|
|
155
|
+
if (formatMonth === 'month-as-letters') {
|
|
156
|
+
format = DateFormats.MEDIUM_LETTER_DATE_FORMAT;
|
|
157
|
+
}
|
|
158
|
+
if (sameDay) {
|
|
159
|
+
format = showSeconds ? DateFormats.MEDIUM_TIME_FORMAT : DateFormats.SHORT_TIME_FORMAT;
|
|
160
|
+
}
|
|
161
|
+
return this.format(date, format);
|
|
162
|
+
}
|
|
163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TimeOrDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
164
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: TimeOrDatePipe, isStandalone: true, name: "timeOrDate" }); }
|
|
165
|
+
}
|
|
166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TimeOrDatePipe, decorators: [{
|
|
167
|
+
type: Pipe,
|
|
168
|
+
args: [{
|
|
169
|
+
name: 'timeOrDate',
|
|
170
|
+
standalone: true,
|
|
171
|
+
}]
|
|
172
|
+
}] });
|
|
173
|
+
|
|
174
|
+
class FormatNumberService {
|
|
175
|
+
constructor(localeId) {
|
|
176
|
+
this.localeId = localeId;
|
|
177
|
+
}
|
|
178
|
+
formatNumber(value, digitsInfo) {
|
|
179
|
+
if (value == null) {
|
|
180
|
+
return '';
|
|
181
|
+
}
|
|
182
|
+
return formatNumber(value, this.localeId, digitsInfo);
|
|
183
|
+
}
|
|
184
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: FormatNumberService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
185
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: FormatNumberService, providedIn: 'root' }); }
|
|
186
|
+
}
|
|
187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: FormatNumberService, decorators: [{
|
|
188
|
+
type: Injectable,
|
|
189
|
+
args: [{
|
|
190
|
+
providedIn: 'root',
|
|
191
|
+
}]
|
|
192
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
193
|
+
type: Inject,
|
|
194
|
+
args: [LOCALE_ID]
|
|
195
|
+
}] }] });
|
|
196
|
+
|
|
197
|
+
class FormatNumberPipe {
|
|
198
|
+
constructor(formatNumberService) {
|
|
199
|
+
this.formatNumberService = formatNumberService;
|
|
200
|
+
}
|
|
201
|
+
transform(value, digitsInfo = '1.2-2') {
|
|
202
|
+
return this.formatNumberService.formatNumber(value, digitsInfo);
|
|
203
|
+
}
|
|
204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: FormatNumberPipe, deps: [{ token: FormatNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
205
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: FormatNumberPipe, isStandalone: true, name: "formatNumber" }); }
|
|
206
|
+
}
|
|
207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: FormatNumberPipe, decorators: [{
|
|
208
|
+
type: Pipe,
|
|
209
|
+
args: [{
|
|
210
|
+
name: 'formatNumber',
|
|
211
|
+
standalone: true,
|
|
212
|
+
}]
|
|
213
|
+
}], ctorParameters: () => [{ type: FormatNumberService }] });
|
|
214
|
+
|
|
215
|
+
function formatAmount(amount, amountServiceConfiguration, locale, nativeCurrency) {
|
|
216
|
+
const config = deriveConfiguration(amountServiceConfiguration);
|
|
217
|
+
let formattedAmount = formatNumber(amount && amount.amount, locale, config.digitsInfo);
|
|
218
|
+
if (config.stripSign) {
|
|
219
|
+
formattedAmount = formattedAmount.replace('-', '').trim();
|
|
220
|
+
}
|
|
221
|
+
const currencyCodeToAppend = deriveCurrencyCode(config, amount, nativeCurrency);
|
|
222
|
+
if (!currencyCodeToAppend) {
|
|
223
|
+
return formattedAmount;
|
|
224
|
+
}
|
|
225
|
+
if (config.currencyCodePosition === 'postfix') {
|
|
226
|
+
return formattedAmount + ' ' + currencyCodeToAppend;
|
|
227
|
+
}
|
|
228
|
+
else {
|
|
229
|
+
return currencyCodeToAppend + ' ' + formattedAmount;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
function deriveCurrencyCode(config, amount, nativeCurrency) {
|
|
233
|
+
let currencyCodeToAppend;
|
|
234
|
+
if (config.showCurrencyCode) {
|
|
235
|
+
if (config.showCurrencyCode === 'alwaysShowCurrency') {
|
|
236
|
+
currencyCodeToAppend = amount && amount.currencyCode;
|
|
237
|
+
}
|
|
238
|
+
else if (config.showCurrencyCode === 'showForeignCurrency') {
|
|
239
|
+
currencyCodeToAppend =
|
|
240
|
+
amount && amount.currencyCode !== nativeCurrency ? amount.currencyCode : '';
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
return currencyCodeToAppend || '';
|
|
244
|
+
}
|
|
245
|
+
function deriveConfiguration(configuration) {
|
|
246
|
+
const config = {
|
|
247
|
+
showCurrencyCode: '',
|
|
248
|
+
digitsInfo: '1.2-2',
|
|
249
|
+
stripSign: false,
|
|
250
|
+
};
|
|
251
|
+
return Object.assign({}, config, configuration);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
class AmountService {
|
|
255
|
+
constructor() {
|
|
256
|
+
this.config = inject(KIRBY_EXTENSIONS_LOCALIZATION_TOKEN);
|
|
257
|
+
this.locale = inject(LOCALE_ID);
|
|
258
|
+
}
|
|
259
|
+
/**
|
|
260
|
+
* Applies the transformation logic, by taking the `amount`-argument, and a configuration object - {@link AmountServiceConfiguration}
|
|
261
|
+
*
|
|
262
|
+
* The number is always formatted according to Angular LOCALE_ID
|
|
263
|
+
*
|
|
264
|
+
* @param amount the {@link Amount} to configure
|
|
265
|
+
* @param amountServiceConfiguration
|
|
266
|
+
*/
|
|
267
|
+
formatAmount(amount, amountServiceConfiguration) {
|
|
268
|
+
if (amount == undefined) {
|
|
269
|
+
const config = deriveConfiguration(amountServiceConfiguration);
|
|
270
|
+
if (config.returnValueOnEmptyAmount) {
|
|
271
|
+
return config.returnValueOnEmptyAmount;
|
|
272
|
+
}
|
|
273
|
+
amount = {
|
|
274
|
+
amount: 0.0,
|
|
275
|
+
currencyCode: '',
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
return formatAmount(amount, amountServiceConfiguration, this.locale, this.config.nativeCurrency);
|
|
279
|
+
}
|
|
280
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AmountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
281
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AmountService, providedIn: 'root' }); }
|
|
282
|
+
}
|
|
283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AmountService, decorators: [{
|
|
284
|
+
type: Injectable,
|
|
285
|
+
args: [{
|
|
286
|
+
providedIn: 'root',
|
|
287
|
+
}]
|
|
288
|
+
}] });
|
|
289
|
+
|
|
290
|
+
/**
|
|
291
|
+
* Configuration object for the amount-pipe. The configuration object can be used to control
|
|
292
|
+
* the formatting of the amount, and can be passed as an argument to the amount-pipe when used on an {@link Amount}.
|
|
293
|
+
* - `showCurrencyCode`: Controls whether the currency code should be displayed or not.
|
|
294
|
+
* - `''`: Don't output currency code
|
|
295
|
+
* - `alwaysShowCurrency`: Always show currency code, regardless of presentation currency
|
|
296
|
+
* - `showForeignCurrency`: Only show currency code if it differs from the presentation currency
|
|
297
|
+
* - `digitsInfo`: A string that represents the format of the number. Learn more about the format here: https://angular.io/api/common/DecimalPipe#parameters
|
|
298
|
+
* - `stripSign`: Controls whether the minus sign should be stripped from a negative amount.
|
|
299
|
+
* - `currencyCodePosition`: Controls the position of the currency code in the formatted amount.
|
|
300
|
+
* - `postfix`: Output currency code after the formatted amount, e.g. 1.234,56 EUR
|
|
301
|
+
* - `prefix`: Output currency code before the formatted amount, e.g. DKK 1.234,56
|
|
302
|
+
*/
|
|
303
|
+
class AmountPipe {
|
|
304
|
+
constructor(amountService) {
|
|
305
|
+
this.amountService = amountService;
|
|
306
|
+
}
|
|
307
|
+
/**
|
|
308
|
+
* Applies the transformation logic, by taking the `amount`-argument, and a configuration object - {@link AmountServiceConfiguration} (or a number of arguments, for backwards compatibility).
|
|
309
|
+
*
|
|
310
|
+
* @param amount the {@link Amount} to configure
|
|
311
|
+
* @param amountServiceConfiguration
|
|
312
|
+
*/
|
|
313
|
+
transform(amount, amountServiceConfiguration) {
|
|
314
|
+
return this.amountService.formatAmount(amount, amountServiceConfiguration);
|
|
315
|
+
}
|
|
316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AmountPipe, deps: [{ token: AmountService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
317
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: AmountPipe, isStandalone: true, name: "amount" }); }
|
|
318
|
+
}
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AmountPipe, decorators: [{
|
|
320
|
+
type: Pipe,
|
|
321
|
+
args: [{
|
|
322
|
+
name: 'amount',
|
|
323
|
+
standalone: true,
|
|
324
|
+
}]
|
|
325
|
+
}], ctorParameters: () => [{ type: AmountService }] });
|
|
326
|
+
|
|
327
|
+
function formatAccountNumber(value) {
|
|
328
|
+
return `${value.regNo.padStart(4, '0')} ${value.accountNo.replace(/^0+/, '')}`;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* Pipe that formats a {@link AccountNumber}-object to a common format.
|
|
333
|
+
*/
|
|
334
|
+
class AccountNumberPipe {
|
|
335
|
+
/**
|
|
336
|
+
* Formats the {@link AccountNumber} to a common format.
|
|
337
|
+
*
|
|
338
|
+
* @param value the {@link AccountNumber} to format
|
|
339
|
+
*/
|
|
340
|
+
transform(value) {
|
|
341
|
+
return formatAccountNumber(value);
|
|
342
|
+
}
|
|
343
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AccountNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
344
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: AccountNumberPipe, isStandalone: true, name: "accountNumber" }); }
|
|
345
|
+
}
|
|
346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: AccountNumberPipe, decorators: [{
|
|
347
|
+
type: Pipe,
|
|
348
|
+
args: [{
|
|
349
|
+
name: 'accountNumber',
|
|
350
|
+
standalone: true,
|
|
351
|
+
}]
|
|
352
|
+
}] });
|
|
353
|
+
|
|
354
|
+
class PhoneNumberService {
|
|
355
|
+
constructor() {
|
|
356
|
+
this.config = inject(KIRBY_EXTENSIONS_LOCALIZATION_TOKEN);
|
|
357
|
+
this.locale = inject(LOCALE_ID);
|
|
358
|
+
}
|
|
359
|
+
static chunkUpPhoneNumber(str, chunk) {
|
|
360
|
+
return str.match(new RegExp(`.{1,${chunk}}`, 'g'))?.join(' ') ?? '';
|
|
361
|
+
}
|
|
362
|
+
formatPhoneNumber(phoneNumber, chunk = 2, showCountryCode) {
|
|
363
|
+
const countryCode = typeof phoneNumber === 'string' ? this.config.countryCode : phoneNumber.countryCode;
|
|
364
|
+
const number = typeof phoneNumber === 'string' ? phoneNumber : phoneNumber.number;
|
|
365
|
+
if (!/^\d+$/.test(number)) {
|
|
366
|
+
return;
|
|
367
|
+
}
|
|
368
|
+
if (showCountryCode === undefined) {
|
|
369
|
+
showCountryCode = !this.locale.match(`${this.config.defaultLang}.*`);
|
|
370
|
+
}
|
|
371
|
+
const formattedNumber = PhoneNumberService.chunkUpPhoneNumber(number, chunk);
|
|
372
|
+
if (showCountryCode) {
|
|
373
|
+
return `${countryCode} ${formattedNumber}`;
|
|
374
|
+
}
|
|
375
|
+
else {
|
|
376
|
+
return formattedNumber;
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PhoneNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
380
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PhoneNumberService, providedIn: 'root' }); }
|
|
381
|
+
}
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PhoneNumberService, decorators: [{
|
|
383
|
+
type: Injectable,
|
|
384
|
+
args: [{
|
|
385
|
+
providedIn: 'root',
|
|
386
|
+
}]
|
|
387
|
+
}] });
|
|
388
|
+
|
|
389
|
+
class PhoneNumberPipe {
|
|
390
|
+
constructor(phoneNumberService) {
|
|
391
|
+
this.phoneNumberService = phoneNumberService;
|
|
392
|
+
}
|
|
393
|
+
/**
|
|
394
|
+
* Transforms a phone number, chunked up with spaces between the chunks and the country code in front, if desired.
|
|
395
|
+
*
|
|
396
|
+
* @param phoneNumber A PhoneNumber or a string representation of a phone number
|
|
397
|
+
* @param chunk The chunk size used to split up the phone number with spaces
|
|
398
|
+
* @param showCountryCode Show the country code in front of the phone number. If a string representation is supplied, the KIRBY_EXTENSIONS_LOCALIZATION_TOKEN.countryCode is used.
|
|
399
|
+
*/
|
|
400
|
+
transform(phoneNumber, chunk = 2, showCountryCode) {
|
|
401
|
+
return this.phoneNumberService.formatPhoneNumber(phoneNumber, chunk, showCountryCode);
|
|
402
|
+
}
|
|
403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PhoneNumberPipe, deps: [{ token: PhoneNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
404
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phoneNumber" }); }
|
|
405
|
+
}
|
|
406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PhoneNumberPipe, decorators: [{
|
|
407
|
+
type: Pipe,
|
|
408
|
+
args: [{
|
|
409
|
+
name: 'phoneNumber',
|
|
410
|
+
standalone: true,
|
|
411
|
+
}]
|
|
412
|
+
}], ctorParameters: () => [{ type: PhoneNumberService }] });
|
|
413
|
+
|
|
414
|
+
/**
|
|
415
|
+
* Generated bundle index. Do not edit.
|
|
416
|
+
*/
|
|
417
|
+
|
|
418
|
+
export { AccountNumberPipe, AmountPipe, AmountService, DateFormats, DateOnlyPipe, FormatNumberPipe, FormatNumberService, KIRBY_EXTENSIONS_LOCALIZATION_TOKEN, PhoneNumberPipe, PhoneNumberService, TimeOnlyPipe, TimeOrDatePipe, formatAccountNumber, formatAmount, provideKirbyExtensionsLocalizationToken };
|
|
419
|
+
//# sourceMappingURL=kirbydesign-extensions-angular-localization.mjs.map
|