@unipin/angular-applet 18.9.7 → 21.0.1

package/README.md

@@ -1,24 +1,63 @@
 # UnipinAngular
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
 
 ## Code scaffolding
 
-Run `ng generate component component-name --project unipin-angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project unipin-angular`.
-> Note: Don't forget to add `--project unipin-angular` or else it will be added to the default project in your `angular.json` file. 
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
 
-## Build
+```bash
+ng generate component component-name
+```
 
-Run `ng build unipin-angular` to build the project. The build artifacts will be stored in the `dist/` directory.
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
 
-## Publishing
+```bash
+ng generate --help
+```
 
-After building your library with `ng build unipin-angular`, go to the dist folder `cd dist/unipin-angular` and run `npm publish`.
+## Building
+
+To build the library, run:
+
+```bash
+ng build unipin-angular
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/unipin-angular
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
 
 ## Running unit tests
 
-Run `ng test unipin-angular` to execute the unit tests via [Karma](https://karma-runner.github.io).
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
-## Further help
+## Additional Resources
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/common/assets/styles/freakflags.scss

@@ -0,0 +1,263 @@
+/*!*****************************************************
+Freak Flags, Copyright ©2020 Michael P. Cohen. Freak flags is licenced under the MIT licence.  
+For complete information visit: www.freakflagsprite.com 
+******************************************************/
+.fflag {
+    background-image:url("../imgs/sprites/flagSprite42.webp");
+    background-repeat:no-repeat;
+    background-size: 100% 49494%;
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    vertical-align: middle;
+    box-sizing: content-box;
+    // box-shadow: 0 0 0 1px rgb(220,220,220);
+}
+.fflag-up { //customized .fflag
+    @extend .fflag;
+    //Round utility - merged here
+    background-size: 100%;
+	background-clip: content-box;
+    border-radius: 5%;
+    // Round XL utility - merged here
+    width: 40px;
+    aspect-ratio: 16/9;
+    // @include for-lg{
+    //     width: 32px; height: 26px;
+    // }
+}
+
+.fflag-CH,
+.fflag-NP {box-shadow: none!important}
+.fflag-DZ {background-position:center 0.2287%}
+.fflag-AO {background-position:center 0.4524%}
+.fflag-BJ {background-position:center 0.6721%}
+.fflag-BW {background-position:center 0.8958%}
+.fflag-BF {background-position:center 1.1162%}
+.fflag-BI {background-position:center 1.3379%}
+.fflag-CM {background-position:center 1.5589%}
+.fflag-CV {background-position:center 1.7836%}
+.fflag-CF {background-position:center 2.0047%}
+.fflag-TD {background-position:center 2.2247%}
+.fflag-CD {background-position:left 2.4467%}
+.fflag-DJ {background-position:left 2.6674%}
+.fflag-EG {background-position:center 2.8931%}
+.fflag-GQ {background-position:center 3.1125%}
+.fflag-ER {background-position:left 3.3325%}
+.fflag-ET {background-position:center 3.5542%}
+.fflag-GA {background-position:center 3.7759%}
+.fflag-GM {background-position:center 4.0015%}
+.fflag-GH {background-position:center 4.2229%}
+.fflag-GN {background-position:center 4.441%}
+.fflag-GW {background-position:left 4.66663%}
+.fflag-CI {background-position:center 4.8844%}
+.fflag-KE {background-position:center 5.1061%}
+.fflag-LS {background-position:center 5.3278%}
+.fflag-LR {background-position:left 5.5495%}
+.fflag-LY {background-position:center 5.7712%}
+.fflag-MG {background-position:center 5.994%}
+.fflag-MW {background-position:center 6.2156%}
+.fflag-ML {background-position:center 6.4363%}
+.fflag-MR {background-position:center 6.658%}
+.fflag-MU {background-position:center 6.8805%}
+.fflag-YT {background-position:center 7.1038%}
+.fflag-MA {background-position:center 7.3231%}
+.fflag-MZ {background-position:left 7.5448%}
+.fflag-NA {background-position:left 7.7661%}
+.fflag-NE {background-position:center 7.98937%}
+.fflag-NG {background-position:center 8.2099%}
+.fflag-CG {background-position:center 8.4316%}
+.fflag-RE {background-position:center 8.6533%}
+.fflag-RW {background-position:right 8.875%}
+.fflag-SH {background-position:center 9.0967%}
+.fflag-ST {background-position:center 9.32237%}
+.fflag-SN {background-position:center 9.5426%}
+.fflag-SC {background-position:left 9.7628%}
+.fflag-SL {background-position:center 9.9845%}
+.fflag-SO {background-position:center 10.2052%}
+.fflag-ZA {background-position:left 10.4269%}
+.fflag-SS {background-position:left 10.6486%}
+.fflag-SD {background-position:center 10.8703%}
+.fflag-SR {background-position:center 11.0945%}
+.fflag-SZ {background-position:center 11.3135%}
+.fflag-TG {background-position:left 11.5354%}
+.fflag-TN {background-position:center 11.7593%}
+.fflag-UG {background-position:center 11.9799%}
+.fflag-TZ {background-position:center 12.2005%}
+.fflag-EH {background-position:center 12.4222%}
+.fflag-YE {background-position:center 12.644%}
+.fflag-ZM {background-position:center 12.8664%}
+.fflag-ZW {background-position:left 13.0873%}
+.fflag-AI {background-position:center 13.309%}
+.fflag-AG {background-position:center 13.5307%}
+.fflag-AR {background-position:center 13.7524%}
+.fflag-AW {background-position:left 13.9741%}
+.fflag-BS {background-position:left 14.1958%}
+.fflag-BB {background-position:center 14.4175%}
+.fflag-BQ {background-position:center 14.6415%}
+.fflag-BZ {background-position:center 14.8609%}
+.fflag-BM {background-position:center 15.0826%}
+.fflag-BO {background-position:center 15.306%}
+.fflag-VG {background-position:center 15.528%}
+.fflag-BR {background-position:center 15.7496%}
+.fflag-CA {background-position:center 15.9694%}
+.fflag-KY {background-position:center 16.1911%}
+.fflag-CL {background-position:left 16.4128%}
+.fflag-CO {background-position:left 16.6345%}
+.fflag-KM {background-position:center 16.8562%}
+.fflag-CR {background-position:center 17.0779%}
+.fflag-CU {background-position:left 17.2996%}
+.fflag-CW {background-position:center 17.5213%}
+.fflag-DM {background-position:center 17.743%}
+.fflag-DO {background-position:center 17.968%}
+.fflag-EC {background-position:center 18.1864%}
+.fflag-SV {background-position:center 18.4081%}
+.fflag-FK {background-position:center 18.6298%}
+.fflag-GF {background-position:center 18.8515%}
+.fflag-GL {background-position:left 19.0732%}
+.fflag-GD {background-position:center 19.2987%}
+.fflag-GP {background-position:center 19.518%}
+.fflag-GT {background-position:center 19.7383%}
+.fflag-GY {background-position:center 19.96%}
+.fflag-HT {background-position:center 20.1817%}
+.fflag-HN {background-position:center 20.4034%}
+.fflag-JM {background-position:center 20.6241%}
+.fflag-MQ {background-position:center 20.8468%}
+.fflag-MX {background-position:center 21.0685%}
+.fflag-MS {background-position:center 21.2902%}
+.fflag-NI {background-position:center 21.5119%}
+.fflag-PA {background-position:center 21.7336%}
+.fflag-PY {background-position:center 21.9553%}
+.fflag-PE {background-position:center 22.177%}
+.fflag-PR {background-position:left 22.4002%}
+.fflag-BL {background-position:center 22.6204%}
+.fflag-KN {background-position:center 22.8421%}
+.fflag-LC {background-position:center 23.0638%}
+.fflag-PM {background-position:center 23.2855%}
+.fflag-VC {background-position:center 23.5072%}
+.fflag-SX {background-position:left 23.732%}
+.fflag-TT {background-position:center 23.9506%}
+.fflag-TC {background-position:center 24.1723%}
+.fflag-US {background-position:center 24.394%}
+.fflag-VI {background-position:center 24.6157%}
+.fflag-UY {background-position:left 24.8374%}
+.fflag-VE {background-position:center 25.0591%}
+.fflag-AF {background-position:center 25.2808%}
+.fflag-AZ {background-position:center 25.5025%}
+.fflag-BD {background-position:center 25.7242%}
+.fflag-BT {background-position:center 25.9459%}
+.fflag-BN {background-position:center 26.1676%}
+.fflag-KH {background-position:center 26.3885%}
+.fflag-CN {background-position:left 26.611%}
+.fflag-GE {background-position:center 26.8327%}
+.fflag-HK {background-position:center 27.0544%}
+.fflag-IN {background-position:center 27.2761%}
+.fflag-ID {background-position:center 27.4978%}
+.fflag-JP {background-position:center 27.7195%}
+.fflag-KZ {background-position:center 27.9412%}
+.fflag-LA {background-position:center 28.1615%}
+.fflag-MO {background-position:center 28.3846%}
+.fflag-MY {background-position:center 28.6063%}
+.fflag-MV {background-position:center 28.829%}
+.fflag-MN {background-position:left 29.0497%}
+.fflag-MM {background-position:center 29.2714%}
+.fflag-NP {background-position:left 29.4931%}
+.fflag-KP {background-position:left 29.7148%}
+.fflag-MP {background-position:center 29.9365%}
+.fflag-PW {background-position:center 30.1582%}
+.fflag-PG {background-position:center 30.3799%}
+.fflag-PH {background-position:left 30.6016%}
+.fflag-SG {background-position:left 30.8233%}
+.fflag-KR {background-position:center 31.045%}
+.fflag-LK {background-position:right 31.2667%}
+.fflag-TW {background-position:left 31.4884%}
+.fflag-TJ {background-position:center 31.7101%}
+.fflag-TH {background-position:center 31.9318%}
+.fflag-TL {background-position:left 32.1535%}
+.fflag-TM {background-position:center 32.3752%}
+.fflag-VN {background-position:center 32.5969%}
+.fflag-AL {background-position:center 32.8186%}
+.fflag-AD {background-position:center 33.0403%}
+.fflag-AM {background-position:center 33.258%}
+.fflag-AT {background-position:center 33.4837%}
+.fflag-BY {background-position:left 33.7054%}
+.fflag-BE {background-position:center 33.9271%}
+.fflag-BA {background-position:center 34.1488%}
+.fflag-BG {background-position:center 34.3705%}
+.fflag-HR {background-position:center 34.5922%}
+.fflag-CY {background-position:center 34.8139%}
+.fflag-CZ {background-position:left 35.0356%}
+.fflag-DK {background-position:center 35.2555%}
+.fflag-EE {background-position:center 35.479%}
+.fflag-FO {background-position:center 35.7007%}
+.fflag-FI {background-position:center 35.9224%}
+.fflag-FR {background-position:center 36.1441%}
+.fflag-DE {background-position:center 36.3658%}
+.fflag-GI {background-position:center 36.5875%}
+.fflag-GR {background-position:left 36.8092%}
+.fflag-HU {background-position:center 37.0309%}
+.fflag-IS {background-position:center 37.2526%}
+.fflag-IE {background-position:center 37.4743%}
+.fflag-IM {background-position:center 37.696%}
+.fflag-IT {background-position:center 37.9177%}
+.fflag-JE {background-position:center 38.1394%}
+.fflag-XK {background-position:center 38.3611%}
+.fflag-LV {background-position:center 38.5828%}
+.fflag-LI {background-position:left 38.8045%}
+.fflag-LT {background-position:center 39.0262%}
+.fflag-LU {background-position:center 39.2479%}
+.fflag-MT {background-position:left 39.4696%}
+.fflag-MD {background-position:center 39.6913%}
+.fflag-MC {background-position:center 39.913%}
+.fflag-ME {background-position:center 40.1347%}
+.fflag-NL {background-position:center 40.3564%}
+.fflag-MK {background-position:center 40.5781%}
+.fflag-NO {background-position:center 40.7998%}
+.fflag-PL {background-position:center 41.0215%}
+.fflag-PT {background-position:center 41.2432%}
+.fflag-RO {background-position:center 41.4649%}
+.fflag-RU {background-position:center 41.6866%}
+.fflag-SM {background-position:center 41.9083%}
+.fflag-RS {background-position:center 42.13%}
+.fflag-SK {background-position:center 42.3517%}
+.fflag-SI {background-position:center 42.5734%}
+.fflag-ES {background-position:left 42.7951%}
+.fflag-SE {background-position:center 43.0168%}
+.fflag-CH {background-position:center 43.2385%}
+.fflag-TR {background-position:center 43.4602%}
+.fflag-UA {background-position:center 43.6819%}
+.fflag-GB {background-position:center 43.9036%}
+.fflag-VA {background-position:right 44.1253%}
+.fflag-BH {background-position:center 44.347%}
+.fflag-IR {background-position:center 44.5687%}
+.fflag-IQ {background-position:center 44.7904%}
+.fflag-IL {background-position:center 45.0121%}
+.fflag-KW {background-position:left 45.2338%}
+.fflag-JO {background-position:left 45.4555%}
+.fflag-KG {background-position:center 45.6772%}
+.fflag-LB {background-position:center 45.897%}
+.fflag-OM {background-position:left 46.1206%}
+.fflag-PK {background-position:center 46.3423%}
+.fflag-PS {background-position:center 46.561%}
+.fflag-QA {background-position:center 46.7857%}
+.fflag-SA {background-position:center 47.0074%}
+.fflag-SY {background-position:center 47.2291%}
+.fflag-AE {background-position:center 47.4508%}
+.fflag-UZ {background-position:left 47.6725%}
+.fflag-AU {background-position:center 47.8942%}
+.fflag-NZ {background-position:center 48.1159%}
+
+.ff-sm {width: 12px; height: 12px}
+.ff-md {width: 18px; height: 18px}
+.ff-lg {width: 24px; height: 24px}
+.ff-xl {width: 32px; height: 32px}
+
+// Global special case
+
+.fflag-GO, .fflag-null{
+    background-image:url('../imgs/sprites/flagGlobal.png');
+    background-size: 120%;
+    background-clip: content-box;
+    border-radius: 50%;
+    background-position: center center;
+}

package/common/assets/styles/theme.css

@@ -0,0 +1,69 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(0.9911 0 0);
+    --foreground: oklch(0.3791 0 0);
+
+    --primary: oklch(0.6769 0.1781 44.42);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.9714 0.0136 46.23);
+    --secondary-foreground: oklch(0.6769 0.1781 44.42);
+    --muted: oklch(0.9702 0 0);
+    --muted-foreground: oklch(0.4926 0 0);
+    --accent: oklch(0.9714 0.0136 46.23);
+    --accent-foreground: oklch(0.6769 0.1781 44.42);
+    --destructive: oklch(0.6533 0.2305 28.81);
+
+    --ring: oklch(0.6769 0.1781 44.42);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+}
+    
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+
+    --primary: oklch(0.6769 0.1781 44.42);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.9714 0.0136 46.23);
+    --secondary-foreground: oklch(0.6769 0.1781 44.42);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.9714 0.0136 46.23);
+    --accent-foreground: oklch(0.6769 0.1781 44.42);
+    --destructive: oklch(0.704 0.191 22.216);
+
+    --ring: oklch(0.6769 0.1781 44.42);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+
+    --popover: oklch(0.269 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+} 

package/fesm2022/unipin-angular-applet-accordion.mjs

@@ -0,0 +1,242 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, output, computed, effect, Directive } from '@angular/core';
+import { up } from '@unipin/angular-applet/common';
+
+class UpAccordionDirective {
+    constructor() {
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.type = model('single', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.valueChange = output();
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.defaultValue = model(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : []));
+        this._computedClass = computed(() => {
+            return up(`overflow-hidden`, this.orientation() === 'horizontal' ? 'w-fit' : 'h-fit', this.disabled() ? 'cursor-not-allowed opacity-50' : '', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        effect(() => {
+            if (this.value()) {
+                this.valueChange.emit(this.value());
+            }
+        });
+    }
+    ngOnInit() {
+        const currentValue = this.value();
+        const defaultVal = this.defaultValue();
+        if ((currentValue === undefined ||
+            currentValue === null) &&
+            defaultVal !== undefined) {
+            this.value.set(defaultVal);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpAccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpAccordionDirective, isStandalone: true, selector: "[upAccordion]", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { type: "typeChange", valueChange: "valueChange", value: "valueChange", defaultValue: "defaultValueChange" }, host: { properties: { "attr.dir": "dir()", "class": "_computedClass()" } }, exportAs: ["upAccordion"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpAccordionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upAccordion',
+                    selector: '[upAccordion]',
+                    host: {
+                        '[attr.dir]': 'dir()',
+                        '[class]': '_computedClass()',
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }, { type: i0.Output, args: ["typeChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }, { type: i0.Output, args: ["defaultValueChange"] }] } });
+
+class UpAccordionItemDirective {
+    constructor(wrapper) {
+        this.wrapper = wrapper;
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.isOpened = model(false, ...(ngDevMode ? [{ debugName: "isOpened" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this._computedClass = computed(() => {
+            const isHorizontal = this.wrapper.orientation() === 'horizontal';
+            return up(this.disabled() ? 'opacity-50' : '', isHorizontal ? 'flex flex-row h-auto w-fit' : 'flex flex-col', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        effect(() => {
+            if (this.wrapper.type() === 'single') {
+                this.isOpened.set(this.wrapper.value() === this.value());
+                return;
+            }
+            const values = Array.isArray(this.wrapper.value()) ? this.wrapper.value() : (this.wrapper.value() ? [this.wrapper.value()] : []);
+            this.isOpened.set(values.includes(this.value()));
+        });
+    }
+    setOpen(value) {
+        if (this.disabled() ||
+            this.wrapper.disabled()) {
+            return;
+        }
+        if (this.wrapper.type() === 'multiple') {
+            const rawValue = this.wrapper.value();
+            const currentValues = Array.isArray(rawValue) ? [...rawValue] : (rawValue ? [rawValue] : []);
+            const itemValue = this.value();
+            if (value) {
+                if (!currentValues.includes(itemValue)) {
+                    currentValues.push(itemValue);
+                }
+                this.wrapper.value.set(currentValues);
+                return;
+            }
+            if (!this.wrapper.collapsible()) {
+                return;
+            }
+            const nextValues = currentValues.filter(v => v !== itemValue);
+            this.wrapper.value.set(nextValues.length ? nextValues : undefined);
+            return;
+        }
+        if (value) {
+            this.wrapper.value.set(this.value());
+            return;
+        }
+        if (this.wrapper.collapsible()) {
+            this.wrapper.value.set(undefined);
+            return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpAccordionItemDirective, deps: [{ token: UpAccordionDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpAccordionItemDirective, isStandalone: true, selector: "[upAccordionItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange" }, host: { properties: { "class": "_computedClass()", "attr.data-state": "isOpened()? 'open' : 'closed'" } }, exportAs: ["upAccordionItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpAccordionItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upAccordionItem',
+                    selector: '[upAccordionItem]',
+                    host: {
+                        '[class]': '_computedClass()',
+                        '[attr.data-state]': `isOpened()? 'open' : 'closed'`
+                    }
+                }]
+        }], ctorParameters: () => [{ type: UpAccordionDirective }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class UpAccordionTriggerDirective {
+    constructor(item) {
+        this.item = item;
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this._computedClass = computed(() => {
+            const isItemDisabled = this.item.disabled() || this.item.wrapper.disabled();
+            return up('w-full flex items-center justify-between text-left gap-4 cursor-pointer', isItemDisabled ? 'cursor-not-allowed' : '', this.item.wrapper.orientation() === 'horizontal' ? 'w-fit h-fit' : '', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    }
+    toggleState() {
+        this.item.setOpen(!this.item.isOpened());
+    }
+    onKeyDown(event) {
+        if (this.item.disabled() ||
+            this.item.wrapper.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.toggleState();
+                break;
+            case 'ArrowDown':
+                this.focusNextItem();
+                break;
+            case 'ArrowUp':
+                this.focusPreviousItem();
+                break;
+            case 'Home':
+                this.focusFirstItem();
+                break;
+            case 'End':
+                this.focusLastItem();
+                break;
+        }
+    }
+    focusNextItem() {
+        const triggers = this.getAllTriggers();
+        const currentIndex = triggers.indexOf(document.activeElement);
+        if (currentIndex < triggers.length - 1) {
+            triggers[currentIndex + 1].focus();
+        }
+    }
+    focusPreviousItem() {
+        const triggers = this.getAllTriggers();
+        const currentIndex = triggers.indexOf(document.activeElement);
+        if (currentIndex > 0) {
+            triggers[currentIndex - 1].focus();
+        }
+    }
+    focusFirstItem() {
+        const triggers = this.getAllTriggers();
+        if (triggers.length > 0) {
+            triggers[0].focus();
+        }
+    }
+    focusLastItem() {
+        const triggers = this.getAllTriggers();
+        if (triggers.length > 0) {
+            triggers[triggers.length - 1].focus();
+        }
+    }
+    getAllTriggers() {
+        const accordionElement = document.activeElement?.closest('[upAccordion]');
+        if (!accordionElement) {
+            return [];
+        }
+        return Array.from(accordionElement.querySelectorAll('[upAccordionTrigger]'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpAccordionTriggerDirective, deps: [{ token: UpAccordionItemDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpAccordionTriggerDirective, isStandalone: true, selector: "[upAccordionTrigger]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleState()", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "0", "attr.role": "'button'", "class": "_computedClass()", "attr.aria-expanded": "this.item.isOpened()", "attr.disabled": "this.item.disabled() || null", "attr.data-state": "this.item.isOpened()? 'open' : 'closed'", "attr.aria-disabled": "this.item.disabled() || this.item.wrapper.disabled() || null", "style.writing-mode": "this.item.wrapper.orientation() === 'horizontal'? 'sideways-lr' : ''" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpAccordionTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[upAccordionTrigger]',
+                    host: {
+                        '[attr.tabindex]': '0',
+                        '[attr.role]': `'button'`,
+                        '[class]': '_computedClass()',
+                        '[attr.aria-expanded]': 'this.item.isOpened()',
+                        '[attr.disabled]': 'this.item.disabled() || null',
+                        '[attr.data-state]': `this.item.isOpened()? 'open' : 'closed'`,
+                        '[attr.aria-disabled]': 'this.item.disabled() || this.item.wrapper.disabled() || null',
+                        '[style.writing-mode]': `this.item.wrapper.orientation() === 'horizontal'? 'sideways-lr' : ''`,
+                        '(click)': 'toggleState()',
+                        '(keydown)': 'onKeyDown($event)',
+                    }
+                }]
+        }], ctorParameters: () => [{ type: UpAccordionItemDirective }], propDecorators: { inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UpAccordionContentDirective {
+    constructor(item) {
+        this.item = item;
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this._computedClass = computed(() => {
+            const isOpened = this.item.isOpened();
+            const isDisabled = this.item.disabled() || this.item.wrapper.disabled();
+            const isHorizontal = this.item.wrapper.orientation() === 'horizontal';
+            return up(`overflow-hidden transition-all`, isDisabled ? 'text-gray-400' : '', isHorizontal ? (isOpened ? 'w-full opacity-100' : 'max-w-0 opacity-0 text-nowrap') : (isOpened ? 'h-auto opacity-100' : 'max-h-0 opacity-0'), this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpAccordionContentDirective, deps: [{ token: UpAccordionItemDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpAccordionContentDirective, isStandalone: true, selector: "[upAccordionContent]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upAccordionContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpAccordionContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upAccordionContent',
+                    selector: '[upAccordionContent]',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: UpAccordionItemDirective }], propDecorators: { inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UpAccordionContentDirective, UpAccordionDirective, UpAccordionItemDirective, UpAccordionTriggerDirective };
+//# sourceMappingURL=unipin-angular-applet-accordion.mjs.map