{"_id":"@aniondev/ngx-culture-selector","name":"@aniondev/ngx-culture-selector","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@aniondev/ngx-culture-selector","version":"0.1.1","description":"An angular-component which lets the user choose a culture from a configurable list of cultures.","repository":{"type":"git","url":"git+https://github.com/anionDev/NgxCultureSelector.git"},"homepage":"https://github.com/anionDev/NgxCultureSelector#readme","bugs":{"url":"https://github.com/anionDev/NgxCultureSelector/issues"},"keywords":["angular","material","culture","locale","i18n","internationalization","language","select","ui"],"author":{"name":"Marius Göcke","email":"marius.goecke@gmail.com"},"license":"ISC","private":false,"publishConfig":{"access":"public"},"sideEffects":false,"peerDependencies":{"@angular/cdk":"^22.1.1","@angular/common":"^22.1.1","@angular/core":"^22.1.1","@angular/forms":"^22.1.1","@angular/material":"^22.1.1"},"dependencies":{"tslib":"2.8.1"},"module":"fesm2022/aniondev-ngx-culture-selector.mjs","typings":"types/aniondev-ngx-culture-selector.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/aniondev-ngx-culture-selector.d.ts","default":"./fesm2022/aniondev-ngx-culture-selector.mjs"}},"type":"module","gitHead":"2c1c0e81bcab6d0d04a401025244e56a50f3d10e","_id":"@aniondev/ngx-culture-selector@0.1.1","_nodeVersion":"24.19.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-764MQTJBb3i1WHibbDFVaeQkt4DGKbxkb8sdjzKBNG52JZAbBwSPfA7Q3IoMHjYBJqcHJn1ebtXHPzcAc+AgcA==","shasum":"a5f13b368c67586ddcb3e369ae68514e35af3532","tarball":"https://registry.npmjs.org/@aniondev/ngx-culture-selector/-/ngx-culture-selector-0.1.1.tgz","fileCount":6,"unpackedSize":19951,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICVeeANGgwvFytB1DL6yIgS3JK0ea3fuB6GfQKTenuRqAiBHD8ywZyizntBnvDykVQxCDG871jGPiS5Ew7BLZvmdig=="}]},"_npmUser":{"name":"aniondev","email":"marius.goecke@gmail.com"},"directories":{},"maintainers":[{"name":"aniondev","email":"marius.goecke@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-culture-selector_0.1.1_1788448787076_0.049457991679665136"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-03T15:19:46.873Z","0.1.1":"2026-09-03T15:19:47.233Z","modified":"2026-09-03T15:19:47.468Z"},"maintainers":[{"name":"aniondev","email":"marius.goecke@gmail.com"}],"description":"An angular-component which lets the user choose a culture from a configurable list of cultures.","homepage":"https://github.com/anionDev/NgxCultureSelector#readme","keywords":["angular","material","culture","locale","i18n","internationalization","language","select","ui"],"repository":{"type":"git","url":"git+https://github.com/anionDev/NgxCultureSelector.git"},"author":{"name":"Marius Göcke","email":"marius.goecke@gmail.com"},"bugs":{"url":"https://github.com/anionDev/NgxCultureSelector/issues"},"license":"ISC","readme":"# NgxCultureSelector\n\n## Purpose\n\n`ngx-culture-selector` is an angular-component which lets the user choose a culture (for example `en-GB`, `de`, `de-AT` or `fr`) from a configurable list of cultures.\n\n## Idea\n\nApplications which are available in several languages or regional variants usually need one control which lets the user switch between them. Which cultures are offered - and which text is shown for each of them - differs per application, so the component does not hard-code either: it takes the list as input and only reports which culture the user chose. Applying the chosen culture (for example switching the locale of the application) is deliberately left to the application which uses the component.\n\n## Example\n\n\n\n\nThe trigger always shows the label of the currently chosen culture. Clicking it opens a dropdown which lists the label of every culture that was passed in - this is the native behavior of the underlying `mat-select` and needs no further code.\n\n## Requirements\n\n- Angular 22\n- Angular Material 22 (the component is built on `mat-select`)\n\n## Installation\n\nThe package is published at [npmjs.com/package/@aniondev/ngx-culture-selector](https://www.npmjs.com/package/@aniondev/ngx-culture-selector).\n\n```\nnpm install @aniondev/ngx-culture-selector\n```\n\n## Usage\n\n### 1. Include the theme once\n\nThe component is built on Angular Material, so the application has to include a Material-3-theme exactly once in its `styles.scss`:\n\n```scss\n@use '@angular/material' as mat;\n\nhtml {\n color-scheme: light dark;\n @include mat.theme((color: mat.$azure-palette, typography: Roboto, density: 0));\n}\n```\n\n### 2. Use the component\n\nThe component is standalone, so it is imported directly by the component which shows it. Its trigger always shows the label of the currently chosen culture; clicking it opens a dropdown with the label of every culture that was passed in:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { NgxCultureOption, NgxCultureSelectorComponent } from '@aniondev/ngx-culture-selector';\n\n@Component({\n selector: 'app-toolbar',\n imports: [NgxCultureSelectorComponent],\n template: ``,\n})\nexport class ToolbarComponent {\n protected readonly cultures: NgxCultureOption[] = [\n { culture: 'en-GB', label: 'English (UK)' },\n { culture: 'de', label: 'German' },\n { culture: 'de-AT', label: 'German (Austria)' },\n { culture: 'fr', label: 'French' },\n ];\n\n protected onCultureSelected(culture: string): void {\n // for example: switch the locale of the application\n }\n}\n```\n\n### 3. Inputs and outputs\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `cultures` | `NgxCultureOption[]` | (required) | The cultures the user can choose from. Each entry has a `culture` (the identifier, for example `'en-GB'`) and a `label` (the text shown for it, typically the language-name in English, for example `'English (UK)'`). |\n| `selectedCulture` | `string \\| undefined` | `undefined` | The `culture` of the entry which is preselected. |\n| `label` | `string` | `'Culture'` | The label of the control itself. Set it to a translated text if the application is localized. |\n| `cultureSelected` | `EventEmitter` (output) | - | Emits the `culture` of the entry the user chose. |\n\nBoth which cultures are offered and which text is shown for each of them are decided entirely by the caller - the component does not hard-code or know about any real-world culture. It also does not apply the chosen culture anywhere itself (for example to `document`, to a translation-service or to the `localStorage`): which mechanism an application uses to switch its locale is its own decision.\n\n## Development\n\nThis repository implements the common project structure. The whole pipeline (build, linting, testcases) runs with:\n\n```\ntask bb\n```\n\nThe repository contains a small demo-application which shows the component (it is not part of the published package). It is started with `task rd` and it is also what the visual-regression-tests take their screenshots of. After an intended change of the appearance the baseline-screenshots are regenerated with `task uvrb`.\n\n## License\n\nSee `License.txt`.\n","readmeFilename":"README.md","_rev":"1-ac405f830914c851ec688882e241c4ea"}