@inera/ids-angular 8.2.0 → 9.0.1

package/fesm2022/inera-ids-angular-components-form-radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inera-ids-angular-components-form-radio.mjs","sources":["../../../projects/ids-angular/components/form/radio/radio-group.component.ts","../../../projects/ids-angular/components/form/radio/radio-group.component.html","../../../projects/ids-angular/components/form/radio/radio.component.ts","../../../projects/ids-angular/components/form/radio/radio.component.html","../../../projects/ids-angular/components/form/radio/radio.module.ts","../../../projects/ids-angular/components/form/radio/inera-ids-angular-components-form-radio.ts"],"sourcesContent":["import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';\nimport { IDFormBase } from '@inera/ids-angular/common';\n\n@Component({\n  selector: 'id-radio-group',\n  templateUrl: './radio-group.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class IDRadioGroupComponent extends IDFormBase {\n\n  @Input()\n  name: string | undefined = undefined;\n\n  @Input()\n  legend: string | undefined = undefined;\n\n  @Input()\n  required: boolean = false;\n\n  @Input()\n  compact: boolean = false;\n\n  @Input()\n  errormessage: string | undefined = undefined;\n\n}\n","<ids-radio-group \n  [name]=\"name\" \n  [legend]=\"legend\" \n  [required]=\"required\"\n  [compact]=\"compact\"\n  [attr.novalidation]=\"novalidation ? true : null\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n  <ids-error-message *ngIf=\"errormessage\">{{errormessage}}</ids-error-message>\n</ids-radio-group>","import { Component, Input, ViewEncapsulation } from \"@angular/core\";\nimport { IDFormBase } from \"@inera/ids-angular/common\";\n\n@Component({\n  selector: \"id-radio\",\n  templateUrl: \"./radio.component.html\",\n  encapsulation: ViewEncapsulation.None\n})\nexport class IDRadioComponent extends IDFormBase {\n  @Input()\n  compact: boolean = false;\n}\n","<ids-radio [light]=\"light ? true : null\" [invalid]=\"invalid\" [compact]=\"compact\">\n  <ng-content></ng-content>\n</ids-radio>\n","import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { IDRadioComponent } from './radio.component';\nimport '@inera/ids-core/components/form/radio/register';\nimport { IDRadioGroupComponent } from './radio-group.component';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n  imports: [\n    CommonModule\n  ],\n  declarations: [\n    IDRadioComponent,\n    IDRadioGroupComponent\n  ],\n  exports: [\n    IDRadioComponent,\n    IDRadioGroupComponent\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class IDRadioModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"inera-ids-angular-components-form-radio.mjs","sources":["../../../projects/ids-angular/components/form/radio/radio.component.ts","../../../projects/ids-angular/components/form/radio/radio.component.html","../../../projects/ids-angular/components/form/radio/radio-group.component.ts","../../../projects/ids-angular/components/form/radio/radio-group.component.html","../../../projects/ids-angular/components/form/radio/inera-ids-angular-components-form-radio.ts"],"sourcesContent":["import { Component } from \"@angular/core\";\nimport { IDFormBase } from \"@inera/ids-angular/common\";\n\n@Component({\n  selector: \"id-radio\",\n  templateUrl: \"./radio.component.html\",\n  standalone: true\n})\nexport class IDRadioComponent extends IDFormBase {\n\n  private checkedEvent?: () => void;\n  \n  ngAfterContentInit(): void {\n    super.ngAfterContentInit();\n    if(!this.ngControl) {\n      this.checkedEvent = this.renderer.listen(this.input, 'changed', () => {\n        super._updateErrorState();\n      });\n    }\n    this.renderer.addClass(this.label, 'ids-label--clickable');\n  }\n\n  ngOnDestroy() {\n    this.checkedEvent?.();\n  }\n\n\n}\n","<div class=\"ids-radio\">\n  <ng-content></ng-content>\n  <span class=\"ids-label-wrapper\">\n    <ng-content select=\"label\"></ng-content>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </span>\n</div>\n\n<ng-content select=\"id-error-message\"></ng-content>\n","import { AfterContentInit, Component, ContentChild, ContentChildren, ElementRef, inject, Input, QueryList, Renderer2 } from '@angular/core';\nimport { IDErrorMessageComponent } from \"@inera/ids-angular/components/form/error-message\";\nimport { IDRadioComponent } from './radio.component';\n\n@Component({\n  selector: 'id-radio-group',\n  templateUrl: './radio-group.component.html',\n  standalone: true\n})\nexport class IDRadioGroupComponent implements AfterContentInit {\n\n  @ContentChildren(IDRadioComponent)\n  radios: QueryList<IDRadioComponent>;\n  \n  @ContentChild(IDErrorMessageComponent)\n  errorMessage: IDErrorMessageComponent;\n\n  @Input() name?: string;\n  @Input() legend?: string;\n  @Input() compact: boolean = false;\n\n  renderer = inject(Renderer2)\n  host = inject(ElementRef)\n\n  ngAfterContentInit(): void {\n    this.radios.forEach((radio) => {\n      radio.invalidChange.subscribe((value: boolean) => {\n        this.checkShowErrorMessage();\n      });\n    });\n    this.checkShowErrorMessage();\n    this.setupNames();\n  }\n\n  setupNames() {\n    if(this.name) {\n      const inputs = this.host.nativeElement.querySelectorAll('input')\n      inputs?.forEach((input: HTMLInputElement) => {\n        this.renderer.setAttribute(input, 'name', this.name!);\n      })\n    }\n  }\n\n  checkShowErrorMessage() {\n    if (this.errorMessage) {\n      const isInvalidPresent = this.radios.find((radio) => radio.invalid);\n      this.errorMessage.show = Boolean(isInvalidPresent);\n    }\n  }\n}\n","<fieldset\n  class=\"ids-form-group__fieldset\"\n  [class.ids-form-group__fieldset--compact]=\"compact\"\n>\n  @if (legend) {\n    <div class=\"ids-label-wrapper\">\n      <legend>\n        {{ legend }}\n        <span class=\"ids-legend__tooltip\">\n          <ng-content select=\"id-tooltip\"></ng-content>\n          <ng-content select=\"id-popover\"></ng-content>\n        </span>\n      </legend>\n    </div>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"id-error-message\"></ng-content>\n</fieldset>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/inera-ids-angular-components-form-range.mjs

@@ -1,44 +1,82 @@
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { booleanAttribute, Input, Component } from '@angular/core';
 import { IDFormBase } from '@inera/ids-angular/common';
-import '@inera/ids-core/components/form/range/register';
 
 class IDRangeComponent extends IDFormBase {
-    showticks = false;
+    showTicks = false;
     interval = 0;
+    get min() {
+        return Number(this.input.min);
+    }
+    get max() {
+        return Number(this.input.max);
+    }
+    get step() {
+        return Number(this.input.step);
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.input.addEventListener('input', this.handleInputChange);
+        this.handleInputChange();
+        this.listenToInputAttrChanges();
+    }
+    listenToInputAttrChanges() {
+        const observer = new MutationObserver(() => {
+            this.setupValues();
+            this.handleInputChange();
+        });
+        observer.observe(this.input, {
+            attributes: true,
+            attributeFilter: ["min", "max", "disabled"]
+        });
+    }
+    get ticks() {
+        const ticks = [];
+        if (this.step > 0) {
+            if (this.interval > 0) {
+                for (let val = this.min; val <= this.max; val += this.interval) {
+                    ticks.push(val);
+                }
+            }
+            else {
+                for (let val = this.min; val <= this.max; val += this.step) {
+                    ticks.push(val);
+                }
+            }
+        }
+        return ticks;
+    }
+    handleInputChange = () => {
+        if (this.input) {
+            const val = +this.input.value;
+            this.input.style.backgroundSize = ((val - this.min) * 100) / (this.max - this.min) + "% 100%";
+            this.input.setAttribute("aria-valuenow", this.input.value);
+        }
+    };
+    setupValues() {
+        if (this.input) {
+            this.input.setAttribute("aria-valuemin", "" + this.min);
+            this.input.setAttribute("aria-valuemax", "" + this.max);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDRangeComponent, selector: "id-range", inputs: { showticks: "showticks", interval: "interval" }, usesInheritance: true, ngImport: i0, template: "<ids-range \n  [invalid]=\"invalid\"\n  [interval]=\"interval\"\n  [showticks]=\"showticks\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n</ids-range>", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IDRangeComponent, isStandalone: true, selector: "id-range", inputs: { showTicks: ["showTicks", "showTicks", booleanAttribute], interval: "interval" }, host: { classAttribute: "ids-range" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ids-range\">\n  <div class=\"ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <ng-content select=\"label\"></ng-content>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <ng-content></ng-content>\n  @if (this.showTicks) {\n    <div\n      class=\"ids-range-ticks\"\n      [class.ids-range-ticks--disabled]=\"input.disabled\"\n    >\n      @for (tick of ticks; track tick) {\n        <span class=\"ids-range-tick\">{{ tick }}</span>\n      }\n    </div>\n  }\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'id-range', encapsulation: ViewEncapsulation.None, template: "<ids-range \n  [invalid]=\"invalid\"\n  [interval]=\"interval\"\n  [showticks]=\"showticks\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n</ids-range>" }]
-        }], propDecorators: { showticks: [{
-                type: Input
+            args: [{ selector: 'id-range', standalone: true, host: {
+                        class: 'ids-range',
+                    }, template: "<div class=\"ids-range\">\n  <div class=\"ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <ng-content select=\"label\"></ng-content>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <ng-content></ng-content>\n  @if (this.showTicks) {\n    <div\n      class=\"ids-range-ticks\"\n      [class.ids-range-ticks--disabled]=\"input.disabled\"\n    >\n      @for (tick of ticks; track tick) {\n        <span class=\"ids-range-tick\">{{ tick }}</span>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { showTicks: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], interval: [{
                 type: Input
             }] } });
 
-class IDRangeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IDRangeModule, declarations: [IDRangeComponent], exports: [IDRangeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDRangeModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDRangeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        IDRangeComponent
-                    ],
-                    exports: [
-                        IDRangeComponent
-                    ],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IDRangeComponent, IDRangeModule };
+export { IDRangeComponent };
 //# sourceMappingURL=inera-ids-angular-components-form-range.mjs.map

package/fesm2022/inera-ids-angular-components-form-range.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inera-ids-angular-components-form-range.mjs","sources":["../../../projects/ids-angular/components/form/range/range.component.ts","../../../projects/ids-angular/components/form/range/range.component.html","../../../projects/ids-angular/components/form/range/range.module.ts","../../../projects/ids-angular/components/form/range/inera-ids-angular-components-form-range.ts"],"sourcesContent":["import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';\nimport { IDFormBase } from '@inera/ids-angular/common';\n\n@Component({\n  selector: 'id-range',\n  templateUrl: './range.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class IDRangeComponent extends IDFormBase {\n\n  @Input()\n  showticks: boolean = false;\n\n  @Input()\n  interval: number = 0;\n\n}\n","<ids-range \n  [invalid]=\"invalid\"\n  [interval]=\"interval\"\n  [showticks]=\"showticks\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n</ids-range>","import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { IDRangeComponent } from './range.component';\nimport '@inera/ids-core/components/form/range/register';\n\n@NgModule({\n  declarations: [\n    IDRangeComponent\n  ],\n  exports: [\n    IDRangeComponent\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class IDRangeModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAQM,MAAO,gBAAiB,SAAQ,UAAU,CAAA;IAG9C,SAAS,GAAY,KAAK;IAG1B,QAAQ,GAAW,CAAC;wGANT,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,iICR7B,wNAOY,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDCC,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,SAAS;+BACE,UAAU,EAAA,aAAA,EAEL,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,wNAAA,EAAA;8BAKrC,SAAS,EAAA,CAAA;sBADR;gBAID,QAAQ,EAAA,CAAA;sBADP;;;MEAU,aAAa,CAAA;wGAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;yGAAb,aAAa,EAAA,YAAA,EAAA,CAPtB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAGhB,gBAAgB,CAAA,EAAA,CAAA;yGAIP,aAAa,EAAA,CAAA;;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBATzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA;;;ACZD;;AAEG;;;;"}
+{"version":3,"file":"inera-ids-angular-components-form-range.mjs","sources":["../../../projects/ids-angular/components/form/range/range.component.ts","../../../projects/ids-angular/components/form/range/range.component.html","../../../projects/ids-angular/components/form/range/inera-ids-angular-components-form-range.ts"],"sourcesContent":["import { AfterContentInit, Component, Input, booleanAttribute } from '@angular/core';\nimport { IDFormBase } from \"@inera/ids-angular/common\";\n\n@Component({\n  selector: 'id-range',\n  templateUrl: './range.component.html',\n  standalone: true,\n  host: {\n    class: 'ids-range',\n  }\n})\nexport class IDRangeComponent extends IDFormBase implements AfterContentInit {\n\n  @Input({ transform: booleanAttribute }) showTicks: boolean = false;\n  @Input() interval: number = 0;\n\n  get min() {\n    return Number(this.input.min);\n  }\n\n  get max() {\n    return Number(this.input.max);\n  }\n\n  get step() {\n    return Number(this.input.step);\n  }\n\n  ngAfterContentInit(): void {\n    super.ngAfterContentInit();\n    this.input.addEventListener('input', this.handleInputChange);\n    this.handleInputChange();\n    this.listenToInputAttrChanges();\n  }\n\n  listenToInputAttrChanges() {\n    const observer = new MutationObserver(() => {\n      this.setupValues();\n      this.handleInputChange();\n    });\n    observer.observe(this.input, {\n      attributes: true,\n      attributeFilter: [\"min\", \"max\", \"disabled\"]\n    });\n  }\n\n  get ticks() {\n    const ticks = []\n    if (this.step > 0) {\n      if (this.interval > 0) {\n        for (let val = this.min; val <= this.max; val += this.interval) {\n          ticks.push(val);\n        }\n      } else {\n        for (let val = this.min; val <= this.max; val += this.step) {\n          ticks.push(val);\n        }\n      }\n    }\n    return ticks;\n  }\n\n   handleInputChange = () => {\n    if (this.input) {\n      const val = +this.input.value;\n      this.input.style.backgroundSize = ((val - this.min) * 100) / (this.max - this.min) + \"% 100%\";\n      this.input.setAttribute(\"aria-valuenow\", this.input.value);\n    }\n  };\n\n  setupValues():void {\n    if (this.input) {\n      this.input.setAttribute(\"aria-valuemin\", \"\" + this.min);\n      this.input.setAttribute(\"aria-valuemax\", \"\" + this.max);\n    }\n  }\n    \n\n}\n","<div class=\"ids-range\">\n  <div class=\"ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <ng-content select=\"label\"></ng-content>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <ng-content></ng-content>\n  @if (this.showTicks) {\n    <div\n      class=\"ids-range-ticks\"\n      [class.ids-range-ticks--disabled]=\"input.disabled\"\n    >\n      @for (tick of ticks; track tick) {\n        <span class=\"ids-range-tick\">{{ tick }}</span>\n      }\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/inera-ids-angular-components-form-select-multiple.mjs

@@ -1,67 +1,107 @@
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { IDFormBase } from '@inera/ids-angular/common';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import '@inera/ids-core/components/form/select-multiple/register';
+import { EventEmitter, inject, ElementRef, DestroyRef, booleanAttribute, ContentChildren, Output, Input, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IDFormBase, IDClickOutsideDirective } from '@inera/ids-angular/common';
+import { IDCheckboxComponent } from '@inera/ids-angular/components/form/checkbox';
 
 class IDSelectMultipleComponent extends IDFormBase {
-    labeltext = undefined;
+    placeholder;
+    maxheight;
+    labelText;
+    selectedLabel = 'vald';
+    multiSelectedLabel = 'valda';
+    maxHeight = '8.125rem';
     disabled = false;
-    ariadisabled = false;
-    errormessage = undefined;
-    maxheight = undefined;
-    placeholder = '';
-    selectedlabel = '';
-    multiselectedlabel = '';
+    ariaDisabled = false;
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    isDropdownVisible = false;
+    selectedValues = 0;
+    get checkboxes() {
+        return this.host.nativeElement.querySelectorAll('input');
+    }
+    checkboxComponents;
+    get displayValue() {
+        if (this.selectedValues === 0)
+            return this.placeholder || '';
+        const label = this.selectedValues > 1 ? this.multiSelectedLabel : this.selectedLabel;
+        return `${this.selectedValues} ${label}`;
+    }
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    toggleVisibility() {
+        this.isDropdownVisible ? this.hideDropdown() : this.showDropdown();
+    }
+    handleClickOutside() {
+        if (this.isDropdownVisible) {
+            this.hideDropdown();
+        }
+    }
+    hideDropdown() {
+        this.closed.emit();
+        this.isDropdownVisible = false;
+    }
+    showDropdown() {
+        this.opened.emit();
+        this.isDropdownVisible = true;
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.checkboxes.forEach((checkbox) => {
+            checkbox.addEventListener('change', this.setDisplayValues);
+        });
+        this.checkboxComponents.forEach((checkbox) => {
+            checkbox.invalidChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+                this.checkShowErrorMessage();
+            });
+        });
+        this.checkShowErrorMessage();
+    }
+    checkShowErrorMessage() {
+        if (this.errorMessage) {
+            const isInvalidPresent = this.checkboxComponents.find((checkbox) => checkbox.invalid);
+            this.invalid = Boolean(isInvalidPresent);
+        }
+    }
+    setDisplayValues = () => {
+        this.selectedValues = Array.from(this.checkboxes).filter((checkbox) => checkbox.checked).length;
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectMultipleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDSelectMultipleComponent, selector: "id-select-multiple", inputs: { labeltext: "labeltext", disabled: "disabled", ariadisabled: "ariadisabled", errormessage: "errormessage", maxheight: "maxheight", placeholder: "placeholder", selectedlabel: "selectedlabel", multiselectedlabel: "multiselectedlabel" }, usesInheritance: true, ngImport: i0, template: "<ids-select-multiple\n  [attr.light]=\"light ? true : null\"\n  [invalid]=\"invalid\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [attr.novalidation]=\"novalidation ? true : null\"\n  [attr.ariadisabled]=\"ariadisabled ? true : null\"\n  [labeltext]=\"labeltext\"\n  [placeholder]=\"placeholder\"\n  [selectedlabel]=\"selectedlabel\"\n  [multiselectedlabel]=\"multiselectedlabel\"\n  [maxheight]=\"maxheight\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n  <ids-error-message *ngIf=\"errormessage\">{{ errormessage }}</ids-error-message>\n</ids-select-multiple>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IDSelectMultipleComponent, isStandalone: true, selector: "id-select-multiple", inputs: { placeholder: "placeholder", maxheight: "maxheight", labelText: "labelText", selectedLabel: "selectedLabel", multiSelectedLabel: "multiSelectedLabel", maxHeight: "maxHeight", disabled: ["disabled", "disabled", booleanAttribute], ariaDisabled: ["ariaDisabled", "ariaDisabled", booleanAttribute] }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "checkboxComponents", predicate: IDCheckboxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ids-select-multiple\" \n  idClickOutside\n  (idClickOutside)=\"handleClickOutside()\">\n  <div class=\"ids-select-multiple-label-wrapper ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <label\n      id=\"expanded-default\"\n      for=\"input-expanded-default\"\n      class=\"ids-label\"\n      [class.ids-label--disabled]=\"disabled || ariaDisabled\"\n    >\n      {{ labelText }}\n    </label>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <div class=\"ids-select-multiple__select-wrapper\">\n    <input\n      (click)=\"toggleVisibility()\"\n      type=\"button\"\n      aria-labelledby=\"expanded-default\"\n      [attr.aria-expanded]=\"isDropdownVisible\"\n      [attr.aria-disabled]=\"ariaDisabled\"\n      id=\"input-expanded-default\"\n      class=\"ids-select-multiple__select\"\n      [value]=\"displayValue\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n  <div class=\"ids-select-multiple__dropdown-wrapper\">\n    <div\n      class=\"ids-select-multiple__dropdown\"\n      [class.ids-select-multiple__dropdown--expanded]=\"isDropdownVisible\"\n    >\n      <div\n        class=\"ids-select-multiple__dropdown-scroll-area\"\n        [style.max-height]=\"maxHeight\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: IDClickOutsideDirective, selector: "[idClickOutside]", outputs: ["idClickOutside"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectMultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'id-select-multiple', encapsulation: ViewEncapsulation.None, template: "<ids-select-multiple\n  [attr.light]=\"light ? true : null\"\n  [invalid]=\"invalid\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [attr.novalidation]=\"novalidation ? true : null\"\n  [attr.ariadisabled]=\"ariadisabled ? true : null\"\n  [labeltext]=\"labeltext\"\n  [placeholder]=\"placeholder\"\n  [selectedlabel]=\"selectedlabel\"\n  [multiselectedlabel]=\"multiselectedlabel\"\n  [maxheight]=\"maxheight\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n  <ids-error-message *ngIf=\"errormessage\">{{ errormessage }}</ids-error-message>\n</ids-select-multiple>\n" }]
-        }], propDecorators: { labeltext: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], ariadisabled: [{
-                type: Input
-            }], errormessage: [{
+            args: [{ selector: 'id-select-multiple', imports: [IDClickOutsideDirective], standalone: true, template: "<div class=\"ids-select-multiple\" \n  idClickOutside\n  (idClickOutside)=\"handleClickOutside()\">\n  <div class=\"ids-select-multiple-label-wrapper ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <label\n      id=\"expanded-default\"\n      for=\"input-expanded-default\"\n      class=\"ids-label\"\n      [class.ids-label--disabled]=\"disabled || ariaDisabled\"\n    >\n      {{ labelText }}\n    </label>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <div class=\"ids-select-multiple__select-wrapper\">\n    <input\n      (click)=\"toggleVisibility()\"\n      type=\"button\"\n      aria-labelledby=\"expanded-default\"\n      [attr.aria-expanded]=\"isDropdownVisible\"\n      [attr.aria-disabled]=\"ariaDisabled\"\n      id=\"input-expanded-default\"\n      class=\"ids-select-multiple__select\"\n      [value]=\"displayValue\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n  <div class=\"ids-select-multiple__dropdown-wrapper\">\n    <div\n      class=\"ids-select-multiple__dropdown\"\n      [class.ids-select-multiple__dropdown--expanded]=\"isDropdownVisible\"\n    >\n      <div\n        class=\"ids-select-multiple__dropdown-scroll-area\"\n        [style.max-height]=\"maxHeight\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>" }]
+        }], propDecorators: { placeholder: [{
                 type: Input
             }], maxheight: [{
                 type: Input
-            }], placeholder: [{
+            }], labelText: [{
                 type: Input
-            }], selectedlabel: [{
+            }], selectedLabel: [{
                 type: Input
-            }], multiselectedlabel: [{
+            }], multiSelectedLabel: [{
                 type: Input
+            }], maxHeight: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], ariaDisabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], checkboxComponents: [{
+                type: ContentChildren,
+                args: [IDCheckboxComponent, { descendants: true }]
             }] } });
 
-class IDSelectMultipleModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectMultipleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IDSelectMultipleModule, declarations: [IDSelectMultipleComponent], imports: [CommonModule], exports: [IDSelectMultipleComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectMultipleModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectMultipleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        IDSelectMultipleComponent
-                    ],
-                    exports: [
-                        IDSelectMultipleComponent
-                    ],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IDSelectMultipleComponent, IDSelectMultipleModule };
+export { IDSelectMultipleComponent };
 //# sourceMappingURL=inera-ids-angular-components-form-select-multiple.mjs.map

package/fesm2022/inera-ids-angular-components-form-select-multiple.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inera-ids-angular-components-form-select-multiple.mjs","sources":["../../../projects/ids-angular/components/form/select-multiple/select-multiple.component.ts","../../../projects/ids-angular/components/form/select-multiple/select-multiple.component.html","../../../projects/ids-angular/components/form/select-multiple/select-multiple.module.ts","../../../projects/ids-angular/components/form/select-multiple/inera-ids-angular-components-form-select-multiple.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { IDFormBase } from '@inera/ids-angular/common';\n\n@Component({\n  selector: 'id-select-multiple',\n  templateUrl: './select-multiple.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class IDSelectMultipleComponent extends IDFormBase {\n\n  @Input()\n  labeltext: string | undefined = undefined;\n\n  @Input()\n  disabled: boolean = false;\n\n  @Input()\n  ariadisabled: boolean = false;\n\n  @Input()\n  errormessage: string | undefined = undefined;\n\n  @Input()\n  maxheight: string | undefined = undefined;\n\n  @Input()\n  placeholder: string = '';\n\n  @Input()\n  selectedlabel: string = '';\n\n  @Input()\n  multiselectedlabel: string = '';\n\n}\n","<ids-select-multiple\n  [attr.light]=\"light ? true : null\"\n  [invalid]=\"invalid\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [attr.novalidation]=\"novalidation ? true : null\"\n  [attr.ariadisabled]=\"ariadisabled ? true : null\"\n  [labeltext]=\"labeltext\"\n  [placeholder]=\"placeholder\"\n  [selectedlabel]=\"selectedlabel\"\n  [multiselectedlabel]=\"multiselectedlabel\"\n  [maxheight]=\"maxheight\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n  <ids-error-message *ngIf=\"errormessage\">{{ errormessage }}</ids-error-message>\n</ids-select-multiple>\n","import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { IDSelectMultipleComponent, } from './select-multiple.component';\nimport '@inera/ids-core/components/form/select-multiple/register';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n  imports: [\n    CommonModule\n  ],\n  declarations: [\n    IDSelectMultipleComponent\n  ],\n  exports: [\n    IDSelectMultipleComponent\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class IDSelectMultipleModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAQM,MAAO,yBAA0B,SAAQ,UAAU,CAAA;IAGvD,SAAS,GAAuB,SAAS;IAGzC,QAAQ,GAAY,KAAK;IAGzB,YAAY,GAAY,KAAK;IAG7B,YAAY,GAAuB,SAAS;IAG5C,SAAS,GAAuB,SAAS;IAGzC,WAAW,GAAW,EAAE;IAGxB,aAAa,GAAW,EAAE;IAG1B,kBAAkB,GAAW,EAAE;wGAxBpB,yBAAyB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,qUCRtC,0nBAgBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDRa,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBALrC,SAAS;+BACE,oBAAoB,EAAA,aAAA,EAEf,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,0nBAAA,EAAA;8BAKrC,SAAS,EAAA,CAAA;sBADR;gBAID,QAAQ,EAAA,CAAA;sBADP;gBAID,YAAY,EAAA,CAAA;sBADX;gBAID,YAAY,EAAA,CAAA;sBADX;gBAID,SAAS,EAAA,CAAA;sBADR;gBAID,WAAW,EAAA,CAAA;sBADV;gBAID,aAAa,EAAA,CAAA;sBADZ;gBAID,kBAAkB,EAAA,CAAA;sBADjB;;;MEdU,sBAAsB,CAAA;wGAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,CAP/B,yBAAyB,CAAA,EAAA,OAAA,EAAA,CAHzB,YAAY,aAMZ,yBAAyB,CAAA,EAAA,CAAA;AAIhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,YAV/B,YAAY,CAAA,EAAA,CAAA;;4FAUH,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAZlC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;AACD,oBAAA,YAAY,EAAE;wBACZ;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA;;;AChBD;;AAEG;;;;"}
+{"version":3,"file":"inera-ids-angular-components-form-select-multiple.mjs","sources":["../../../projects/ids-angular/components/form/select-multiple/select-multiple.component.ts","../../../projects/ids-angular/components/form/select-multiple/select-multiple.component.html","../../../projects/ids-angular/components/form/select-multiple/inera-ids-angular-components-form-select-multiple.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  Component,\n  ContentChildren,\n  DestroyRef,\n  ElementRef,\n  EventEmitter,\n  Input,\n  Output,\n  QueryList,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IDClickOutsideDirective, IDFormBase } from '@inera/ids-angular/common';\nimport { IDCheckboxComponent } from '@inera/ids-angular/components/form/checkbox';\n\n@Component({\n  selector: 'id-select-multiple',\n  templateUrl: './select-multiple.component.html',\n  imports: [IDClickOutsideDirective],\n  standalone: true,\n})\nexport class IDSelectMultipleComponent extends IDFormBase implements AfterContentInit {\n  @Input() placeholder?: string;\n  @Input() maxheight?: string;\n  @Input() labelText?: string;\n  @Input() selectedLabel = 'vald';\n  @Input() multiSelectedLabel = 'valda';\n  @Input() maxHeight = '8.125rem';\n  @Input({ transform: booleanAttribute }) disabled = false;\n  @Input({ transform: booleanAttribute }) ariaDisabled = false;\n\n  @Output() opened = new EventEmitter();\n  @Output() closed = new EventEmitter();\n\n  isDropdownVisible = false;\n  selectedValues = 0;\n\n  get checkboxes(): HTMLInputElement[] {\n    return this.host.nativeElement.querySelectorAll('input');\n  }\n\n  @ContentChildren(IDCheckboxComponent, {descendants: true})\n  checkboxComponents: QueryList<IDCheckboxComponent>;\n\n  get displayValue(): string {\n    if (this.selectedValues === 0) return this.placeholder || '';\n    const label = this.selectedValues > 1 ? this.multiSelectedLabel : this.selectedLabel;\n    return `${this.selectedValues} ${label}`;\n  }\n\n  host = inject(ElementRef);\n  private destroyRef = inject(DestroyRef);\n\n  toggleVisibility() {\n    this.isDropdownVisible ? this.hideDropdown() : this.showDropdown();\n  }\n\n  handleClickOutside() {\n    if(this.isDropdownVisible) {\n      this.hideDropdown();\n    }\n  }\n\n  hideDropdown() {\n    this.closed.emit();\n    this.isDropdownVisible = false;\n  }\n\n  showDropdown() {\n    this.opened.emit();\n    this.isDropdownVisible = true;\n  }\n\n  ngAfterContentInit(): void {\n    super.ngAfterContentInit();\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.addEventListener('change', this.setDisplayValues);\n    });\n\n    this.checkboxComponents.forEach((checkbox) => {\n      checkbox.invalidChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value: boolean) => {\n        this.checkShowErrorMessage();\n      });\n    });\n    this.checkShowErrorMessage();\n  }\n\n  checkShowErrorMessage() {\n    if (this.errorMessage) {\n      const isInvalidPresent = this.checkboxComponents.find((checkbox) => checkbox.invalid);\n      this.invalid = Boolean(isInvalidPresent);\n    }\n  }\n\n  setDisplayValues = () => {\n    this.selectedValues = Array.from(this.checkboxes).filter((checkbox) => checkbox.checked).length;\n  };\n}\n","<div class=\"ids-select-multiple\" \n  idClickOutside\n  (idClickOutside)=\"handleClickOutside()\">\n  <div class=\"ids-select-multiple-label-wrapper ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <label\n      id=\"expanded-default\"\n      for=\"input-expanded-default\"\n      class=\"ids-label\"\n      [class.ids-label--disabled]=\"disabled || ariaDisabled\"\n    >\n      {{ labelText }}\n    </label>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <div class=\"ids-select-multiple__select-wrapper\">\n    <input\n      (click)=\"toggleVisibility()\"\n      type=\"button\"\n      aria-labelledby=\"expanded-default\"\n      [attr.aria-expanded]=\"isDropdownVisible\"\n      [attr.aria-disabled]=\"ariaDisabled\"\n      id=\"input-expanded-default\"\n      class=\"ids-select-multiple__select\"\n      [value]=\"displayValue\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n  <div class=\"ids-select-multiple__dropdown-wrapper\">\n    <div\n      class=\"ids-select-multiple__dropdown\"\n      [class.ids-select-multiple__dropdown--expanded]=\"isDropdownVisible\"\n    >\n      <div\n        class=\"ids-select-multiple__dropdown-scroll-area\"\n        [style.max-height]=\"maxHeight\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/inera-ids-angular-components-form-select.mjs

@@ -1,38 +1,23 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Component } from '@angular/core';
 import { IDFormBase } from '@inera/ids-angular/common';
-import '@inera/ids-core/components/form/select/register';
 
 class IDSelectComponent extends IDFormBase {
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.input.classList.add('ids-select__select');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDSelectComponent, selector: "id-select", usesInheritance: true, ngImport: i0, template: "<ids-select\n  [invalid]=\"invalid\"\n  [srof]=\"srof\"\n  [attr.light]=\"light ? true : null\"\n  [attr.novalidation]=\"novalidation ? true : null\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n</ids-select>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDSelectComponent, isStandalone: true, selector: "id-select", usesInheritance: true, ngImport: i0, template: "<div class=\"ids-select\">\n  <div class=\"ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <ng-content select=\"label\"></ng-content>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <div class=\"ids-select__wrapper\">\n    <ng-content select=\"select\"></ng-content>\n  </div>\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-select", encapsulation: ViewEncapsulation.None, template: "<ids-select\n  [invalid]=\"invalid\"\n  [srof]=\"srof\"\n  [attr.light]=\"light ? true : null\"\n  [attr.novalidation]=\"novalidation ? true : null\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n</ids-select>\n" }]
-        }] });
-
-class IDSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IDSelectModule, declarations: [IDSelectComponent], exports: [IDSelectComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        IDSelectComponent
-                    ],
-                    exports: [
-                        IDSelectComponent
-                    ],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
+            args: [{ selector: 'id-select', standalone: true, template: "<div class=\"ids-select\">\n  <div class=\"ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <ng-content select=\"label\"></ng-content>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <div class=\"ids-select__wrapper\">\n    <ng-content select=\"select\"></ng-content>\n  </div>\n</div>\n" }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IDSelectComponent, IDSelectModule };
+export { IDSelectComponent };
 //# sourceMappingURL=inera-ids-angular-components-form-select.mjs.map

package/fesm2022/inera-ids-angular-components-form-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inera-ids-angular-components-form-select.mjs","sources":["../../../projects/ids-angular/components/form/select/select.component.ts","../../../projects/ids-angular/components/form/select/select.component.html","../../../projects/ids-angular/components/form/select/select.module.ts","../../../projects/ids-angular/components/form/select/inera-ids-angular-components-form-select.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from \"@angular/core\";\nimport { IDFormBase } from \"@inera/ids-angular/common\";\n\n@Component({\n  selector: \"id-select\",\n  templateUrl: \"./select.component.html\",\n  encapsulation: ViewEncapsulation.None\n})\nexport class IDSelectComponent extends IDFormBase {}\n","<ids-select\n  [invalid]=\"invalid\"\n  [srof]=\"srof\"\n  [attr.light]=\"light ? true : null\"\n  [attr.novalidation]=\"novalidation ? true : null\"\n  (onValid)=\"emitOnValid($event)\"\n  (onInvalid)=\"emitOnInvalid($event)\">\n  <ng-content></ng-content>\n</ids-select>\n","import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { IDSelectComponent } from './select.component';\nimport '@inera/ids-core/components/form/select/register';\n\n@NgModule({\n  declarations: [\n    IDSelectComponent\n  ],\n  exports: [\n    IDSelectComponent\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class IDSelectModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAQM,MAAO,iBAAkB,SAAQ,UAAU,CAAA;wGAApC,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,wECR9B,oRASA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDDa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;+BACE,WAAW,EAAA,aAAA,EAEN,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,oRAAA,EAAA;;;MEO1B,cAAc,CAAA;wGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;yGAAd,cAAc,EAAA,YAAA,EAAA,CAPvB,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAGjB,iBAAiB,CAAA,EAAA,CAAA;yGAIR,cAAc,EAAA,CAAA;;4FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAT1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA;;;ACZD;;AAEG;;;;"}
+{"version":3,"file":"inera-ids-angular-components-form-select.mjs","sources":["../../../projects/ids-angular/components/form/select/select.component.ts","../../../projects/ids-angular/components/form/select/select.component.html","../../../projects/ids-angular/components/form/select/inera-ids-angular-components-form-select.ts"],"sourcesContent":["import { AfterContentInit, Component } from '@angular/core';\nimport { IDFormBase } from '@inera/ids-angular/common';\n\n@Component({\n  selector: 'id-select',\n  templateUrl: './select.component.html',\n  standalone: true,\n})\nexport class IDSelectComponent extends IDFormBase implements AfterContentInit {\n\n  ngAfterContentInit(): void {\n    super.ngAfterContentInit();\n    this.input.classList.add('ids-select__select');\n  }\n}\n","<div class=\"ids-select\">\n  <div class=\"ids-label-wrapper ids-label-wrapper--margin-bottom\">\n    <ng-content select=\"label\"></ng-content>\n    <span class=\"ids-label__tooltip\">\n      <ng-content select=\"id-tooltip\"></ng-content>\n      <ng-content select=\"id-popover\"></ng-content>\n    </span>\n  </div>\n  <div class=\"ids-select__wrapper\">\n    <ng-content select=\"select\"></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAQM,MAAO,iBAAkB,SAAQ,UAAU,CAAA;IAE/C,kBAAkB,GAAA;QAChB,KAAK,CAAC,kBAAkB,EAAE;QAC1B,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC;IAChD;wGALW,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,4FCR9B,4aAYA,EAAA,CAAA;;4FDJa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,cAET,IAAI,EAAA,QAAA,EAAA,4aAAA,EAAA;;;AENlB;;AAEG;;;;"}

package/fesm2022/inera-ids-angular-components-form-spinner.mjs

@@ -1,46 +1,31 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import '@inera/ids-core/components/form/spinner/register';
+import { Input, Component } from '@angular/core';
 
 class IDSpinnerComponent {
-    srtext = '';
-    live = 'polite';
-    light = false;
+    srText;
+    variant = '1';
+    get hostClass() {
+        return `ids-spinner ids-spinner--${this.variant}`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDSpinnerComponent, selector: "id-spinner", inputs: { srtext: "srtext", live: "live", light: "light" }, ngImport: i0, template: "<ids-spinner [light]=\"light\" [srtext]=\"srtext\" [live]=\"live\">\n  <ng-content></ng-content>\n</ids-spinner>", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDSpinnerComponent, isStandalone: true, selector: "id-spinner", inputs: { srText: "srText", variant: "variant" }, host: { properties: { "class": "hostClass" } }, ngImport: i0, template: "<p *ngIf=\"srText\" class=\"ids-spinner-sr\">{{srText}}</p>\n<div class=\"ids-bounce-1\"></div>\n<div class=\"ids-bounce-2\"></div>\n<div class=\"ids-bounce-3\"></div>\n<ng-template #spinner></ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'id-spinner', encapsulation: ViewEncapsulation.None, template: "<ids-spinner [light]=\"light\" [srtext]=\"srtext\" [live]=\"live\">\n  <ng-content></ng-content>\n</ids-spinner>" }]
-        }], propDecorators: { srtext: [{
+            args: [{ selector: 'id-spinner', imports: [CommonModule], standalone: true, host: {
+                        '[class]': 'hostClass',
+                    }, template: "<p *ngIf=\"srText\" class=\"ids-spinner-sr\">{{srText}}</p>\n<div class=\"ids-bounce-1\"></div>\n<div class=\"ids-bounce-2\"></div>\n<div class=\"ids-bounce-3\"></div>\n<ng-template #spinner></ng-template>" }]
+        }], propDecorators: { srText: [{
                 type: Input
-            }], live: [{
-                type: Input
-            }], light: [{
+            }], variant: [{
                 type: Input
             }] } });
 
-class IDSpinnerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IDSpinnerModule, declarations: [IDSpinnerComponent], exports: [IDSpinnerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSpinnerModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDSpinnerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        IDSpinnerComponent
-                    ],
-                    exports: [
-                        IDSpinnerComponent
-                    ],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IDSpinnerComponent, IDSpinnerModule };
+export { IDSpinnerComponent };
 //# sourceMappingURL=inera-ids-angular-components-form-spinner.mjs.map

package/fesm2022/inera-ids-angular-components-form-spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inera-ids-angular-components-form-spinner.mjs","sources":["../../../projects/ids-angular/components/form/spinner/spinner.component.ts","../../../projects/ids-angular/components/form/spinner/spinner.component.html","../../../projects/ids-angular/components/form/spinner/spinner.module.ts","../../../projects/ids-angular/components/form/spinner/inera-ids-angular-components-form-spinner.ts"],"sourcesContent":["import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'id-spinner',\n  templateUrl: './spinner.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class IDSpinnerComponent {\n\n  @Input()\n  srtext: string | undefined = '';\n\n  @Input()\n  live: string = 'polite';\n\n  @Input()\n  light: boolean = false;\n\n}\n","<ids-spinner [light]=\"light\" [srtext]=\"srtext\" [live]=\"live\">\n  <ng-content></ng-content>\n</ids-spinner>","import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { IDSpinnerComponent } from './spinner.component';\nimport '@inera/ids-core/components/form/spinner/register';\n\n@NgModule({\n  declarations: [\n    IDSpinnerComponent\n  ],\n  exports: [\n    IDSpinnerComponent\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class IDSpinnerModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAOa,kBAAkB,CAAA;IAG7B,MAAM,GAAuB,EAAE;IAG/B,IAAI,GAAW,QAAQ;IAGvB,KAAK,GAAY,KAAK;wGATX,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,8GCP/B,kHAEc,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDKD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;+BACE,YAAY,EAAA,aAAA,EAEP,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,kHAAA,EAAA;8BAKrC,MAAM,EAAA,CAAA;sBADL;gBAID,IAAI,EAAA,CAAA;sBADH;gBAID,KAAK,EAAA,CAAA;sBADJ;;;MEFU,eAAe,CAAA;wGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;yGAAf,eAAe,EAAA,YAAA,EAAA,CAPxB,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAGlB,kBAAkB,CAAA,EAAA,CAAA;yGAIT,eAAe,EAAA,CAAA;;4FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAT3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA;;;ACZD;;AAEG;;;;"}
+{"version":3,"file":"inera-ids-angular-components-form-spinner.mjs","sources":["../../../projects/ids-angular/components/form/spinner/spinner.component.ts","../../../projects/ids-angular/components/form/spinner/spinner.component.html","../../../projects/ids-angular/components/form/spinner/inera-ids-angular-components-form-spinner.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'id-spinner',\n  templateUrl: './spinner.component.html',\n  imports: [CommonModule],\n  standalone: true,\n  host: {\n    '[class]': 'hostClass',\n  }\n})\nexport class IDSpinnerComponent {\n\n  @Input() srText?: string;\n  @Input() variant: '1' | '2' | '3' = '1';\n\n  get hostClass() {\n    return `ids-spinner ids-spinner--${this.variant}`;\n  }\n\n}\n","<p *ngIf=\"srText\" class=\"ids-spinner-sr\">{{srText}}</p>\n<div class=\"ids-bounce-1\"></div>\n<div class=\"ids-bounce-2\"></div>\n<div class=\"ids-bounce-3\"></div>\n<ng-template #spinner></ng-template>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAYa,kBAAkB,CAAA;AAEpB,IAAA,MAAM;IACN,OAAO,GAAoB,GAAG;AAEvC,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,CAAA,yBAAA,EAA4B,IAAI,CAAC,OAAO,EAAE;IACnD;wGAPW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZ/B,+MAIoC,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDExB,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAMX,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAT9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WAEb,CAAC,YAAY,CAAC,EAAA,UAAA,EACX,IAAI,EAAA,IAAA,EACV;AACJ,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA,EAAA,QAAA,EAAA,+MAAA,EAAA;8BAIQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,OAAO,EAAA,CAAA;sBAAf;;;AEfH;;AAEG;;;;"}