@koobiq/components 19.8.3 → 20.1.0

package/fesm2022/koobiq-components-flag.mjs

@@ -0,0 +1,66 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+
+/**
+ * Presentational wrapper for a consumer-provided country flag (inline `<svg>` or `<img>`).
+ * Decorates it with shape and shadow and applies the accessibility contract.
+ *
+ * ```html
+ * <kbq-flag><img src="…/AL.svg" alt="" /></kbq-flag> Albania
+ * ```
+ */
+class KbqFlag {
+    constructor() {
+        /**
+         * Shape of the flag. `square`/`circle` expect a 1:1 (square) flag source to be projected.
+         * @default rectangle
+         */
+        this.shape = input('rectangle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+        /**
+         * Inset hairline that keeps the flag distinct from the background. Its color adapts to the theme.
+         * @default inset
+         */
+        this.shadow = input('inset', ...(ngDevMode ? [{ debugName: "shadow" }] : []));
+        /** Renders a neutral placeholder — use when no flag can be shown (unknown / invalid country code). */
+        this.empty = input(false, ...(ngDevMode ? [{ debugName: "empty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Marks the flag as decorative — hidden from screen readers (use when adjacent text is present). */
+        this.decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Accessible name for the flag. Use when the flag carries meaning and has no adjacent text. */
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFlag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqFlag, isStandalone: true, selector: "kbq-flag", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-flag_square": "shape() === 'square'", "class.kbq-flag_circle": "shape() === 'circle'", "class.kbq-flag_shadow-inset": "shadow() === 'inset'", "class.kbq-flag_empty": "empty()", "attr.role": "decorative() ? null : (label() ? 'img' : null)", "attr.aria-label": "decorative() ? null : (label() || null)", "attr.aria-hidden": "decorative() ? 'true' : null" }, classAttribute: "kbq-flag" }, exportAs: ["kbqFlag"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-flag{--kbq-flag-shadow-color: var(--kbq-line-contrast-fade);--kbq-flag-empty-background: var(--kbq-states-background-disabled);--kbq-flag-border-radius: 0;--kbq-flag-aspect-ratio: 3 / 2;display:inline-block;position:relative;box-sizing:border-box;height:1em;aspect-ratio:var(--kbq-flag-aspect-ratio);vertical-align:middle;overflow:hidden;border-radius:var(--kbq-flag-border-radius)}.kbq-flag svg,.kbq-flag img{display:block;width:100%;height:100%;object-fit:cover}.kbq-flag.kbq-flag_shadow-inset:after{content:\"\";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--kbq-flag-shadow-color);pointer-events:none}.kbq-flag.kbq-flag_square,.kbq-flag.kbq-flag_circle{--kbq-flag-aspect-ratio: 1 / 1}.kbq-flag.kbq-flag_circle{border-radius:50%}.kbq-flag.kbq-flag_empty{background:var(--kbq-flag-empty-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFlag, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-flag', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-flag',
+                        '[class.kbq-flag_square]': "shape() === 'square'",
+                        '[class.kbq-flag_circle]': "shape() === 'circle'",
+                        '[class.kbq-flag_shadow-inset]': "shadow() === 'inset'",
+                        '[class.kbq-flag_empty]': 'empty()',
+                        '[attr.role]': "decorative() ? null : (label() ? 'img' : null)",
+                        '[attr.aria-label]': 'decorative() ? null : (label() || null)',
+                        '[attr.aria-hidden]': "decorative() ? 'true' : null"
+                    }, exportAs: 'kbqFlag', styles: [".kbq-flag{--kbq-flag-shadow-color: var(--kbq-line-contrast-fade);--kbq-flag-empty-background: var(--kbq-states-background-disabled);--kbq-flag-border-radius: 0;--kbq-flag-aspect-ratio: 3 / 2;display:inline-block;position:relative;box-sizing:border-box;height:1em;aspect-ratio:var(--kbq-flag-aspect-ratio);vertical-align:middle;overflow:hidden;border-radius:var(--kbq-flag-border-radius)}.kbq-flag svg,.kbq-flag img{display:block;width:100%;height:100%;object-fit:cover}.kbq-flag.kbq-flag_shadow-inset:after{content:\"\";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--kbq-flag-shadow-color);pointer-events:none}.kbq-flag.kbq-flag_square,.kbq-flag.kbq-flag_circle{--kbq-flag-aspect-ratio: 1 / 1}.kbq-flag.kbq-flag_circle{border-radius:50%}.kbq-flag.kbq-flag_empty{background:var(--kbq-flag-empty-background)}\n"] }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+class KbqFlagModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFlagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqFlagModule, imports: [KbqFlag], exports: [KbqFlag] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFlagModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFlagModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [KbqFlag],
+                    exports: [KbqFlag]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbqFlag, KbqFlagModule };
+//# sourceMappingURL=koobiq-components-flag.mjs.map

package/fesm2022/koobiq-components-flag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koobiq-components-flag.mjs","sources":["../../../packages/components/flag/flag.ts","../../../packages/components/flag/module.ts","../../../packages/components/flag/koobiq-components-flag.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\nimport { KbqFlagShadow, KbqFlagShape } from './flag.types';\n\n/**\n * Presentational wrapper for a consumer-provided country flag (inline `<svg>` or `<img>`).\n * Decorates it with shape and shadow and applies the accessibility contract.\n *\n * ```html\n * <kbq-flag><img src=\"…/AL.svg\" alt=\"\" /></kbq-flag> Albania\n * ```\n */\n@Component({\n    selector: 'kbq-flag',\n    template: '<ng-content />',\n    styleUrl: 'flag.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-flag',\n        '[class.kbq-flag_square]': \"shape() === 'square'\",\n        '[class.kbq-flag_circle]': \"shape() === 'circle'\",\n        '[class.kbq-flag_shadow-inset]': \"shadow() === 'inset'\",\n        '[class.kbq-flag_empty]': 'empty()',\n        '[attr.role]': \"decorative() ? null : (label() ? 'img' : null)\",\n        '[attr.aria-label]': 'decorative() ? null : (label() || null)',\n        '[attr.aria-hidden]': \"decorative() ? 'true' : null\"\n    },\n    exportAs: 'kbqFlag'\n})\nexport class KbqFlag {\n    /**\n     * Shape of the flag. `square`/`circle` expect a 1:1 (square) flag source to be projected.\n     * @default rectangle\n     */\n    readonly shape = input<KbqFlagShape>('rectangle');\n    /**\n     * Inset hairline that keeps the flag distinct from the background. Its color adapts to the theme.\n     * @default inset\n     */\n    readonly shadow = input<KbqFlagShadow>('inset');\n    /** Renders a neutral placeholder — use when no flag can be shown (unknown / invalid country code). */\n    readonly empty = input(false, { transform: booleanAttribute });\n    /** Marks the flag as decorative — hidden from screen readers (use when adjacent text is present). */\n    readonly decorative = input(false, { transform: booleanAttribute });\n    /** Accessible name for the flag. Use when the flag carries meaning and has no adjacent text. */\n    readonly label = input<string>();\n}\n","import { NgModule } from '@angular/core';\nimport { KbqFlag } from './flag';\n\n@NgModule({\n    imports: [KbqFlag],\n    exports: [KbqFlag]\n})\nexport class KbqFlagModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;MAmBU,OAAO,CAAA;AAlBpB,IAAA,WAAA,GAAA;AAmBI;;;AAGG;AACM,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAe,WAAW,iDAAC;AACjD;;;AAGG;AACM,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAgB,OAAO,kDAAC;;AAEtC,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,KAAK,yCAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;;AAErD,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,8CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;;QAE1D,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AACnC,IAAA;kIAjBY,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAP,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,OAAO,onCAhBN,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,40BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAgBjB,OAAO,EAAA,UAAA,EAAA,CAAA;kBAlBnB,SAAS;+BACI,UAAU,EAAA,QAAA,EACV,gBAAgB,EAAA,eAAA,EAET,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACF,wBAAA,KAAK,EAAE,UAAU;AACjB,wBAAA,yBAAyB,EAAE,sBAAsB;AACjD,wBAAA,yBAAyB,EAAE,sBAAsB;AACjD,wBAAA,+BAA+B,EAAE,sBAAsB;AACvD,wBAAA,wBAAwB,EAAE,SAAS;AACnC,wBAAA,aAAa,EAAE,gDAAgD;AAC/D,wBAAA,mBAAmB,EAAE,yCAAyC;AAC9D,wBAAA,oBAAoB,EAAE;AACzB,qBAAA,EAAA,QAAA,EACS,SAAS,EAAA,MAAA,EAAA,CAAA,40BAAA,CAAA,EAAA;;;MCpBV,aAAa,CAAA;kIAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;mIAAb,aAAa,EAAA,OAAA,EAAA,CAHZ,OAAO,CAAA,EAAA,OAAA,EAAA,CACP,OAAO,CAAA,EAAA,CAAA,CAAA;mIAER,aAAa,EAAA,CAAA,CAAA;;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAJzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,OAAO,CAAC;oBAClB,OAAO,EAAE,CAAC,OAAO;AACpB,iBAAA;;;ACND;;AAEG;;;;"}