otimus-library 0.4.84 → 0.4.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/otimus-library.mjs +108 -4
  2. package/fesm2022/otimus-library.mjs.map +1 -1
  3. package/index.d.ts +41 -4
  4. package/package.json +1 -1
package/fesm2022/otimus-library.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, Injectable, Input, Directive, EventEmitter, Output, ContentChildren, forwardRef, ChangeDetectionStrategy, ContentChild, ViewChildren, ViewChild, ViewEncapsulation, HostBinding, input, inject, PLATFORM_ID, RendererFactory2, signal, ElementRef, ViewContainerRef, computed, viewChild, booleanAttribute } from '@angular/core';
2
+ import { Component, Injectable, Input, Directive, EventEmitter, Output, ContentChildren, forwardRef, ChangeDetectionStrategy, input, effect, ContentChild, ViewChildren, ViewChild, ViewEncapsulation, HostBinding, inject, PLATFORM_ID, RendererFactory2, signal, ElementRef, ViewContainerRef, computed, viewChild, booleanAttribute, output } from '@angular/core';
3
3
  import * as i2$1 from '@angular/cdk/menu';
4
4
  import { CdkMenuModule } from '@angular/cdk/menu';
5
5
  import * as i1 from '@angular/common';
@@ -1015,6 +1015,7 @@ class OcAutocompleteComponent {
1015
1015
  this.ocEnableKeyboard = false;
1016
1016
  this.ocSelectionEllipsisAt = null;
1017
1017
  this.ocMaxVisibleChips = null;
1018
+ this.ocSelectedValues = input([], ...(ngDevMode ? [{ debugName: "ocSelectedValues" }] : []));
1018
1019
  this.ocValueChange = new EventEmitter();
1019
1020
  this.ocChange = new EventEmitter();
1020
1021
  this.ocCounterSelectChange = new EventEmitter();
@@ -1037,6 +1038,12 @@ class OcAutocompleteComponent {
1037
1038
  this.overlayRef = null;
1038
1039
  this.dropdownComponentRef = null;
1039
1040
  this.clickOutListener = null;
1041
+ effect(() => {
1042
+ const incoming = this.ocSelectedValues();
1043
+ this.selectedValues = incoming.slice();
1044
+ this.updateInputPaddingForChips();
1045
+ this.cdr.detectChanges();
1046
+ });
1040
1047
  }
1041
1048
  set ocData(value) {
1042
1049
  this._ocData = value;
@@ -1576,7 +1583,7 @@ class OcAutocompleteComponent {
1576
1583
  this.closeOverlay();
1577
1584
  }
1578
1585
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: InternationalizationService }, { token: StyleThemeService }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
1579
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: "ocData", ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex", iconSize: "iconSize", ocSelectByTyping: "ocSelectByTyping", ocDisabled: "ocDisabled", ocType: "ocType", ocShowBackdrop: "ocShowBackdrop", ocHasDeleteButton: "ocHasDeleteButton", ocEnableKeyboard: "ocEnableKeyboard", ocSelectionEllipsisAt: "ocSelectionEllipsisAt", ocMaxVisibleChips: "ocMaxVisibleChips" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocMultipleSelectChange: "ocMultipleSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick", ocHiddenChipsCountChange: "ocHiddenChipsCountChange" }, host: { properties: { "style.width": "computedWidth", "style.min-width": "computedMinWidth", "style.max-width": "computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"oc-input-box\"\n [ngClass]=\"{\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n 'multiple-select': ocType === 'multipleSelect' || ocType === 'counterSelect',\n }\"\n>\n <ng-content></ng-content>\n @if (ocType === 'multipleSelect' && selectedValues.length > 0) {\n <div class=\"oc-chips-container\">\n @for (item of visibleChips; track item.value) {\n <oc-chip\n ocType=\"tag\"\n (ocRemove)=\"removeSelectedValue(item)\"\n >\n <p\n ocTooltip\n [content]=\"\n ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n \"\n >\n @if (ocSelectionEllipsisAt) {\n {{ item.name | slice: 0 : ocSelectionEllipsisAt\n }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n } @else {\n {{ item.name }}\n }\n </p>\n </oc-chip>\n }\n @if (hiddenChipsCountByInput > 0) {\n <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n <p>+{{ hiddenChipsCountByInput }}</p>\n </oc-chip>\n }\n </div>\n }\n @if (ocType === 'counterSelect' && getCounterItems().length > 0) {\n <div class=\"oc-chips-container\">\n @for (item of visibleCounterChips; track item.value) {\n <oc-chip\n ocType=\"tag\"\n (ocRemove)=\"decrementCounter(item)\"\n >\n <p\n ocTooltip\n [content]=\"\n ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n \"\n >\n @if (ocSelectionEllipsisAt) {\n {{ item.name | slice: 0 : ocSelectionEllipsisAt\n }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n } @else {\n {{ item.name }}\n }\n ({{ item.counter }})\n </p>\n </oc-chip>\n }\n @if (hiddenCounterChipsCount > 0) {\n <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n <p>+{{ hiddenCounterChipsCount }}</p>\n </oc-chip>\n }\n </div>\n }\n <input\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n 'has-chips':\n (ocType === 'multipleSelect' && selectedValues.length > 0) ||\n (ocType === 'counterSelect' && getCounterItems().length > 0),\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{border-radius:0;font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:-webkit-autofill~label,.shui-input-box input:autofill~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box input:-webkit-autofill~label,.shui-input-box input:autofill~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:-webkit-autofill~label,.oc-input-box input:autofill~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small input:-webkit-autofill~label,.oc-input-box.small input:autofill~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large input:-webkit-autofill~label,.oc-input-box.large input:autofill~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}.oc-input-box.multiple-select{position:relative}.oc-input-box.multiple-select input{padding-left:.9rem;text-indent:0}.oc-input-box.multiple-select.small input{padding-left:.7rem}.oc-input-box.multiple-select.large input{padding-left:1rem}.oc-input-box.multiple-select input.has-chips~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.oc-input-box.multiple-select.shui input.has-chips~label,.oc-input-box.multiple-select.shui-input-box input.has-chips~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500;color:#0169b2}.oc-chips-container{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;pointer-events:none;max-width:calc(100% - 1.8rem);overflow:hidden}.oc-chips-container oc-chip{cursor:pointer;pointer-events:auto;flex-shrink:0}.oc-chips-container oc-chip p{font-size:12px!important;margin:0;padding:0}.oc-chips-container oc-chip:hover{opacity:.8}.oc-chips-container oc-chip.oc-more-chip{cursor:default;pointer-events:none}.oc-chips-container oc-chip.oc-more-chip p{font-weight:600;color:#7e8485}.oc-input-box.multiple-select .oc-chips-container~input{padding-left:calc(.9rem + var(--chips-width, 0px))}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize"], outputs: ["ocClick", "ocRemove"] }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1586
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: { classPropertyName: "ocData", publicName: "ocData", isSignal: false, isRequired: false, transformFunction: null }, ocPlaceholder: { classPropertyName: "ocPlaceholder", publicName: "ocPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, ocError: { classPropertyName: "ocError", publicName: "ocError", isSignal: false, isRequired: false, transformFunction: null }, ocSize: { classPropertyName: "ocSize", publicName: "ocSize", isSignal: false, isRequired: false, transformFunction: null }, ocValue: { classPropertyName: "ocValue", publicName: "ocValue", isSignal: false, isRequired: false, transformFunction: null }, ocClearOnChange: { classPropertyName: "ocClearOnChange", publicName: "ocClearOnChange", isSignal: false, isRequired: false, transformFunction: null }, ocWidth: { classPropertyName: "ocWidth", publicName: "ocWidth", isSignal: false, isRequired: false, transformFunction: null }, ocMinWidth: { classPropertyName: "ocMinWidth", publicName: "ocMinWidth", isSignal: false, isRequired: false, transformFunction: null }, ocMaxWidth: { classPropertyName: "ocMaxWidth", publicName: "ocMaxWidth", isSignal: false, isRequired: false, transformFunction: null }, ocOptionsMaxHeight: { classPropertyName: "ocOptionsMaxHeight", publicName: "ocOptionsMaxHeight", isSignal: false, isRequired: false, transformFunction: null }, ocOptionsWidth: { classPropertyName: "ocOptionsWidth", publicName: "ocOptionsWidth", isSignal: false, isRequired: false, transformFunction: null }, ocRequired: { classPropertyName: "ocRequired", publicName: "ocRequired", isSignal: false, isRequired: false, transformFunction: null }, ocMaxResults: { classPropertyName: "ocMaxResults", publicName: "ocMaxResults", isSignal: false, isRequired: false, transformFunction: null }, ocAllowNotListedValue: { classPropertyName: "ocAllowNotListedValue", publicName: "ocAllowNotListedValue", isSignal: false, isRequired: false, transformFunction: null }, ocNoAvailableOptionsText: { classPropertyName: "ocNoAvailableOptionsText", publicName: "ocNoAvailableOptionsText", isSignal: false, isRequired: false, transformFunction: null }, ocTypeForMoreResultsText: { classPropertyName: "ocTypeForMoreResultsText", publicName: "ocTypeForMoreResultsText", isSignal: false, isRequired: false, transformFunction: null }, ocLoading: { classPropertyName: "ocLoading", publicName: "ocLoading", isSignal: false, isRequired: false, transformFunction: null }, ocSemanticLike: { classPropertyName: "ocSemanticLike", publicName: "ocSemanticLike", isSignal: false, isRequired: false, transformFunction: null }, ocStyle: { classPropertyName: "ocStyle", publicName: "ocStyle", isSignal: false, isRequired: false, transformFunction: null }, ocTabIndex: { classPropertyName: "ocTabIndex", publicName: "ocTabIndex", isSignal: false, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: false, isRequired: false, transformFunction: null }, ocSelectByTyping: { classPropertyName: "ocSelectByTyping", publicName: "ocSelectByTyping", isSignal: false, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: false, isRequired: false, transformFunction: null }, ocType: { classPropertyName: "ocType", publicName: "ocType", isSignal: false, isRequired: false, transformFunction: null }, ocShowBackdrop: { classPropertyName: "ocShowBackdrop", publicName: "ocShowBackdrop", isSignal: false, isRequired: false, transformFunction: null }, ocHasDeleteButton: { classPropertyName: "ocHasDeleteButton", publicName: "ocHasDeleteButton", isSignal: false, isRequired: false, transformFunction: null }, ocEnableKeyboard: { classPropertyName: "ocEnableKeyboard", publicName: "ocEnableKeyboard", isSignal: false, isRequired: false, transformFunction: null }, ocSelectionEllipsisAt: { classPropertyName: "ocSelectionEllipsisAt", publicName: "ocSelectionEllipsisAt", isSignal: false, isRequired: false, transformFunction: null }, ocMaxVisibleChips: { classPropertyName: "ocMaxVisibleChips", publicName: "ocMaxVisibleChips", isSignal: false, isRequired: false, transformFunction: null }, ocSelectedValues: { classPropertyName: "ocSelectedValues", publicName: "ocSelectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocMultipleSelectChange: "ocMultipleSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick", ocHiddenChipsCountChange: "ocHiddenChipsCountChange" }, host: { properties: { "style.width": "computedWidth", "style.min-width": "computedMinWidth", "style.max-width": "computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"oc-input-box\"\n [ngClass]=\"{\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n 'multiple-select': ocType === 'multipleSelect' || ocType === 'counterSelect',\n }\"\n>\n <ng-content></ng-content>\n @if (ocType === 'multipleSelect' && selectedValues.length > 0) {\n <div class=\"oc-chips-container\">\n @for (item of visibleChips; track item.value) {\n <oc-chip\n ocType=\"tag\"\n (ocRemove)=\"removeSelectedValue(item)\"\n >\n <p\n ocTooltip\n [content]=\"\n ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n \"\n >\n @if (ocSelectionEllipsisAt) {\n {{ item.name | slice: 0 : ocSelectionEllipsisAt\n }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n } @else {\n {{ item.name }}\n }\n </p>\n </oc-chip>\n }\n @if (hiddenChipsCountByInput > 0) {\n <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n <p>+{{ hiddenChipsCountByInput }}</p>\n </oc-chip>\n }\n </div>\n }\n @if (ocType === 'counterSelect' && getCounterItems().length > 0) {\n <div class=\"oc-chips-container\">\n @for (item of visibleCounterChips; track item.value) {\n <oc-chip\n ocType=\"tag\"\n (ocRemove)=\"decrementCounter(item)\"\n >\n <p\n ocTooltip\n [content]=\"\n ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n \"\n >\n @if (ocSelectionEllipsisAt) {\n {{ item.name | slice: 0 : ocSelectionEllipsisAt\n }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n } @else {\n {{ item.name }}\n }\n ({{ item.counter }})\n </p>\n </oc-chip>\n }\n @if (hiddenCounterChipsCount > 0) {\n <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n <p>+{{ hiddenCounterChipsCount }}</p>\n </oc-chip>\n }\n </div>\n }\n <input\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n 'has-chips':\n (ocType === 'multipleSelect' && selectedValues.length > 0) ||\n (ocType === 'counterSelect' && getCounterItems().length > 0),\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{border-radius:0;font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:-webkit-autofill~label,.shui-input-box input:autofill~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box input:-webkit-autofill~label,.shui-input-box input:autofill~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:-webkit-autofill~label,.oc-input-box input:autofill~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small input:-webkit-autofill~label,.oc-input-box.small input:autofill~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large input:-webkit-autofill~label,.oc-input-box.large input:autofill~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}.oc-input-box.multiple-select{position:relative}.oc-input-box.multiple-select input{padding-left:.9rem;text-indent:0}.oc-input-box.multiple-select.small input{padding-left:.7rem}.oc-input-box.multiple-select.large input{padding-left:1rem}.oc-input-box.multiple-select input.has-chips~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.oc-input-box.multiple-select.shui input.has-chips~label,.oc-input-box.multiple-select.shui-input-box input.has-chips~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500;color:#0169b2}.oc-chips-container{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;pointer-events:none;max-width:calc(100% - 1.8rem);overflow:hidden}.oc-chips-container oc-chip{cursor:pointer;pointer-events:auto;flex-shrink:0}.oc-chips-container oc-chip p{font-size:12px!important;margin:0;padding:0}.oc-chips-container oc-chip:hover{opacity:.8}.oc-chips-container oc-chip.oc-more-chip{cursor:default;pointer-events:none}.oc-chips-container oc-chip.oc-more-chip p{font-weight:600;color:#7e8485}.oc-input-box.multiple-select .oc-chips-container~input{padding-left:calc(.9rem + var(--chips-width, 0px))}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize"], outputs: ["ocClick", "ocRemove"] }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1580
1587
  }
1581
1588
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
1582
1589
  type: Component,
@@ -1661,7 +1668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
1661
1668
  type: Input
1662
1669
  }], ocMaxVisibleChips: [{
1663
1670
  type: Input
1664
- }], ocValueChange: [{
1671
+ }], ocSelectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSelectedValues", required: false }] }], ocValueChange: [{
1665
1672
  type: Output
1666
1673
  }], ocChange: [{
1667
1674
  type: Output
@@ -3971,6 +3978,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
3971
3978
  type: Output
3972
3979
  }] } });
3973
3980
 
3981
+ const SWIPE_THRESHOLD = 80;
3982
+ const CLOSE_ANIMATION_MS = 280;
3983
+ const SWIPE_OUT_ANIMATION_MS = 240;
3984
+ class OcNotificationComponent {
3985
+ constructor() {
3986
+ this.ocClosable = input(true, ...(ngDevMode ? [{ debugName: "ocClosable" }] : []));
3987
+ this.ocClickable = input(true, ...(ngDevMode ? [{ debugName: "ocClickable" }] : []));
3988
+ this.ocSwipeable = input(true, ...(ngDevMode ? [{ debugName: "ocSwipeable" }] : []));
3989
+ this.ocSwipeDirection = input('left', ...(ngDevMode ? [{ debugName: "ocSwipeDirection" }] : []));
3990
+ this.ocBorderRadius = input(14, ...(ngDevMode ? [{ debugName: "ocBorderRadius" }] : []));
3991
+ this.ocLineClamp = input(2, ...(ngDevMode ? [{ debugName: "ocLineClamp" }] : []));
3992
+ this.ocCloseLabel = input('Dismiss', ...(ngDevMode ? [{ debugName: "ocCloseLabel" }] : []));
3993
+ this.ocClose = output();
3994
+ this.ocClick = output();
3995
+ this.closing = signal(false, ...(ngDevMode ? [{ debugName: "closing" }] : []));
3996
+ this.swipedOut = signal(false, ...(ngDevMode ? [{ debugName: "swipedOut" }] : []));
3997
+ this.drag = signal({ active: false, dx: 0 }, ...(ngDevMode ? [{ debugName: "drag" }] : []));
3998
+ this.card = viewChild.required('card');
3999
+ this.styleVars = computed(() => {
4000
+ const dx = this.drag().dx;
4001
+ return {
4002
+ '--notif-radius': `${this.ocBorderRadius()}px`,
4003
+ '--notif-line-clamp': `${this.ocLineClamp()}`,
4004
+ '--swipe-out-x': this.ocSwipeDirection() === 'right' ? '120%' : '-120%',
4005
+ transform: dx !== 0 ? `translateX(${dx}px)` : null,
4006
+ opacity: dx !== 0 ? Math.max(0.4, 1 - Math.abs(dx) / 280) : null,
4007
+ };
4008
+ }, ...(ngDevMode ? [{ debugName: "styleVars" }] : []));
4009
+ this.startX = 0;
4010
+ this.pointerCaptured = false;
4011
+ this.recentDragDx = 0;
4012
+ }
4013
+ onPointerDown(event) {
4014
+ if (!this.ocSwipeable())
4015
+ return;
4016
+ if (event.button !== 0 && event.pointerType !== 'touch')
4017
+ return;
4018
+ if (event.target.closest('button, a, input'))
4019
+ return;
4020
+ this.startX = event.clientX;
4021
+ this.drag.set({ active: true, dx: 0 });
4022
+ this.card().nativeElement.setPointerCapture(event.pointerId);
4023
+ this.pointerCaptured = true;
4024
+ }
4025
+ onPointerMove(event) {
4026
+ const drag = this.drag();
4027
+ if (!drag.active)
4028
+ return;
4029
+ const rawDx = event.clientX - this.startX;
4030
+ const dx = this.ocSwipeDirection() === 'left' ? Math.min(0, rawDx) : Math.max(0, rawDx);
4031
+ this.drag.set({ active: true, dx });
4032
+ }
4033
+ onPointerUp(event) {
4034
+ const drag = this.drag();
4035
+ if (!drag.active)
4036
+ return;
4037
+ if (this.pointerCaptured) {
4038
+ try {
4039
+ this.card().nativeElement.releasePointerCapture(event.pointerId);
4040
+ }
4041
+ catch {
4042
+ // ignore — pointer may have already been released
4043
+ }
4044
+ this.pointerCaptured = false;
4045
+ }
4046
+ const dx = drag.dx;
4047
+ this.recentDragDx = dx;
4048
+ this.drag.set({ active: false, dx: 0 });
4049
+ if (Math.abs(dx) > SWIPE_THRESHOLD) {
4050
+ this.swipedOut.set(true);
4051
+ setTimeout(() => this.ocClose.emit(), SWIPE_OUT_ANIMATION_MS);
4052
+ }
4053
+ }
4054
+ onClick() {
4055
+ if (!this.ocClickable())
4056
+ return;
4057
+ const wasDragging = Math.abs(this.recentDragDx) > 4;
4058
+ this.recentDragDx = 0;
4059
+ if (wasDragging)
4060
+ return;
4061
+ if (this.drag().dx !== 0)
4062
+ return;
4063
+ this.ocClick.emit();
4064
+ }
4065
+ onCloseClick(event) {
4066
+ event.stopPropagation();
4067
+ this.closing.set(true);
4068
+ setTimeout(() => this.ocClose.emit(), CLOSE_ANIMATION_MS);
4069
+ }
4070
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4071
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcNotificationComponent, isStandalone: true, selector: "oc-notification", inputs: { ocClosable: { classPropertyName: "ocClosable", publicName: "ocClosable", isSignal: true, isRequired: false, transformFunction: null }, ocClickable: { classPropertyName: "ocClickable", publicName: "ocClickable", isSignal: true, isRequired: false, transformFunction: null }, ocSwipeable: { classPropertyName: "ocSwipeable", publicName: "ocSwipeable", isSignal: true, isRequired: false, transformFunction: null }, ocSwipeDirection: { classPropertyName: "ocSwipeDirection", publicName: "ocSwipeDirection", isSignal: true, isRequired: false, transformFunction: null }, ocBorderRadius: { classPropertyName: "ocBorderRadius", publicName: "ocBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, ocLineClamp: { classPropertyName: "ocLineClamp", publicName: "ocLineClamp", isSignal: true, isRequired: false, transformFunction: null }, ocCloseLabel: { classPropertyName: "ocCloseLabel", publicName: "ocCloseLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocClose: "ocClose", ocClick: "ocClick" }, viewQueries: [{ propertyName: "card", first: true, predicate: ["card"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #card\n class=\"oc-notif\"\n [ngClass]=\"{\n closing: closing(),\n 'swiped-out': swipedOut(),\n dragging: drag().active,\n clickable: ocClickable()\n }\"\n [ngStyle]=\"styleVars()\"\n (click)=\"onClick()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (pointercancel)=\"onPointerUp($event)\"\n>\n <div class=\"oc-notif-avatar-slot\">\n <ng-content select=\"[ocNotificationAvatar]\"></ng-content>\n </div>\n\n <div class=\"oc-notif-body\">\n <div class=\"oc-notif-kind\">\n <ng-content select=\"[ocNotificationKind]\"></ng-content>\n </div>\n <div class=\"oc-notif-row1\">\n <span class=\"oc-notif-name\">\n <ng-content select=\"[ocNotificationTitle]\"></ng-content>\n </span>\n </div>\n <div class=\"oc-notif-msg\">\n <ng-content></ng-content>\n </div>\n <div class=\"oc-notif-badge-slot\">\n <ng-content select=\"[ocNotificationBadge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"oc-notif-actions\">\n <span class=\"oc-notif-meta\">\n <ng-content select=\"[ocNotificationTime]\"></ng-content>\n </span>\n @if (ocClosable()) {\n <button\n class=\"oc-notif-close\"\n type=\"button\"\n [attr.aria-label]=\"ocCloseLabel()\"\n [title]=\"ocCloseLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <span class=\"material-symbols-outlined\">close</span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block}.oc-notif{position:relative;display:flex;align-items:flex-start;gap:10px;background:#f8f9ff;border:1px solid rgba(85,5,162,.25);border-radius:var(--notif-radius, 14px);padding:10px 72px 10px 10px;box-shadow:0 1px 3px #1e08320a,0 1px 1px #1e083205;-webkit-user-select:none;user-select:none;transition:transform .2s cubic-bezier(.2,.9,.2,1.05),box-shadow .2s ease,background .2s ease;touch-action:pan-y}.oc-notif.clickable{cursor:pointer}.oc-notif:hover{transform:translateY(-1px);background:#f8f9ff;box-shadow:0 3px 8px -2px #1e08320f,0 1px 2px #1e083208}.oc-notif.closing{animation:ocnSlideOut .28s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.oc-notif.dragging{transition:none}.oc-notif.swiped-out{animation:ocnSwipeOut .24s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}@keyframes ocnSlideOut{to{opacity:0;transform:translate(60px) scale(.94)}}@keyframes ocnSwipeOut{to{opacity:0;transform:translate(var(--swipe-out-x, -120%)) scale(.9)}}.oc-notif-avatar-slot{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.oc-notif-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.oc-notif-kind{font-size:10px;font-weight:400;color:#8f9596;letter-spacing:.1px;line-height:1.2;margin-bottom:1px}.oc-notif-kind:empty{display:none}.oc-notif-row1{display:flex;align-items:baseline;gap:6px;min-width:0}.oc-notif-name{font-size:12.5px;font-weight:700;color:#1e0832;line-height:1.25;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.oc-notif-meta{font-size:10.5px;font-weight:500;color:#8f9596;white-space:nowrap;line-height:1}.oc-notif-meta:empty{display:none}.oc-notif-msg{font-size:12px;color:#353535;line-height:1.4;margin-top:3px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:var(--notif-line-clamp, 2);line-clamp:var(--notif-line-clamp, 2);-webkit-box-orient:vertical;overflow:hidden}.oc-notif-msg:empty{display:none}.oc-notif-badge-slot:empty{display:none}.oc-notif-actions{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:6px;z-index:2}.oc-notif-close{width:20px;height:20px;border-radius:6px;border:0;background:transparent;color:#8f9596;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,color .15s ease}.oc-notif-close:hover{background:#f7f7f7;color:#353535}.oc-notif-close .material-symbols-outlined{font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
4072
+ }
4073
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcNotificationComponent, decorators: [{
4074
+ type: Component,
4075
+ args: [{ selector: 'oc-notification', standalone: true, imports: [CommonModule], template: "<div\n #card\n class=\"oc-notif\"\n [ngClass]=\"{\n closing: closing(),\n 'swiped-out': swipedOut(),\n dragging: drag().active,\n clickable: ocClickable()\n }\"\n [ngStyle]=\"styleVars()\"\n (click)=\"onClick()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (pointercancel)=\"onPointerUp($event)\"\n>\n <div class=\"oc-notif-avatar-slot\">\n <ng-content select=\"[ocNotificationAvatar]\"></ng-content>\n </div>\n\n <div class=\"oc-notif-body\">\n <div class=\"oc-notif-kind\">\n <ng-content select=\"[ocNotificationKind]\"></ng-content>\n </div>\n <div class=\"oc-notif-row1\">\n <span class=\"oc-notif-name\">\n <ng-content select=\"[ocNotificationTitle]\"></ng-content>\n </span>\n </div>\n <div class=\"oc-notif-msg\">\n <ng-content></ng-content>\n </div>\n <div class=\"oc-notif-badge-slot\">\n <ng-content select=\"[ocNotificationBadge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"oc-notif-actions\">\n <span class=\"oc-notif-meta\">\n <ng-content select=\"[ocNotificationTime]\"></ng-content>\n </span>\n @if (ocClosable()) {\n <button\n class=\"oc-notif-close\"\n type=\"button\"\n [attr.aria-label]=\"ocCloseLabel()\"\n [title]=\"ocCloseLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <span class=\"material-symbols-outlined\">close</span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block}.oc-notif{position:relative;display:flex;align-items:flex-start;gap:10px;background:#f8f9ff;border:1px solid rgba(85,5,162,.25);border-radius:var(--notif-radius, 14px);padding:10px 72px 10px 10px;box-shadow:0 1px 3px #1e08320a,0 1px 1px #1e083205;-webkit-user-select:none;user-select:none;transition:transform .2s cubic-bezier(.2,.9,.2,1.05),box-shadow .2s ease,background .2s ease;touch-action:pan-y}.oc-notif.clickable{cursor:pointer}.oc-notif:hover{transform:translateY(-1px);background:#f8f9ff;box-shadow:0 3px 8px -2px #1e08320f,0 1px 2px #1e083208}.oc-notif.closing{animation:ocnSlideOut .28s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.oc-notif.dragging{transition:none}.oc-notif.swiped-out{animation:ocnSwipeOut .24s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}@keyframes ocnSlideOut{to{opacity:0;transform:translate(60px) scale(.94)}}@keyframes ocnSwipeOut{to{opacity:0;transform:translate(var(--swipe-out-x, -120%)) scale(.9)}}.oc-notif-avatar-slot{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.oc-notif-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.oc-notif-kind{font-size:10px;font-weight:400;color:#8f9596;letter-spacing:.1px;line-height:1.2;margin-bottom:1px}.oc-notif-kind:empty{display:none}.oc-notif-row1{display:flex;align-items:baseline;gap:6px;min-width:0}.oc-notif-name{font-size:12.5px;font-weight:700;color:#1e0832;line-height:1.25;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.oc-notif-meta{font-size:10.5px;font-weight:500;color:#8f9596;white-space:nowrap;line-height:1}.oc-notif-meta:empty{display:none}.oc-notif-msg{font-size:12px;color:#353535;line-height:1.4;margin-top:3px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:var(--notif-line-clamp, 2);line-clamp:var(--notif-line-clamp, 2);-webkit-box-orient:vertical;overflow:hidden}.oc-notif-msg:empty{display:none}.oc-notif-badge-slot:empty{display:none}.oc-notif-actions{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:6px;z-index:2}.oc-notif-close{width:20px;height:20px;border-radius:6px;border:0;background:transparent;color:#8f9596;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,color .15s ease}.oc-notif-close:hover{background:#f7f7f7;color:#353535}.oc-notif-close .material-symbols-outlined{font-size:13px}\n"] }]
4076
+ }], propDecorators: { ocClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocClosable", required: false }] }], ocClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocClickable", required: false }] }], ocSwipeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSwipeable", required: false }] }], ocSwipeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSwipeDirection", required: false }] }], ocBorderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocBorderRadius", required: false }] }], ocLineClamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocLineClamp", required: false }] }], ocCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocCloseLabel", required: false }] }], ocClose: [{ type: i0.Output, args: ["ocClose"] }], ocClick: [{ type: i0.Output, args: ["ocClick"] }], card: [{ type: i0.ViewChild, args: ['card', { isSignal: true }] }] } });
4077
+
3974
4078
  class OcToastComponent {
3975
4079
  constructor(toast) {
3976
4080
  this.toast = toast;
@@ -4595,5 +4699,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
4595
4699
  * Generated bundle index. Do not edit.
4596
4700
  */
4597
4701
 
4598
- export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcBreadcrumbComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcChatComponent, OcChatErrorComponent, OcChatHeaderComponent, OcChatInputComponent, OcChatMessageComponent, OcChatMessageListComponent, OcChatToolProposalComponent, OcChatTypingIndicatorComponent, OcChatWelcomeComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDividerComponent, OcDrawerComponent, OcDrawerFooterComponent, OcDrawerHeaderComponent, OcDropdownDirective, OcDropdownImports, OcDropdownMenuContentComponent, OcDropdownMenuItemComponent, OcDropdownMenuLabelComponent, OcDropdownService, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTableComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
4702
+ export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcBreadcrumbComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcChatComponent, OcChatErrorComponent, OcChatHeaderComponent, OcChatInputComponent, OcChatMessageComponent, OcChatMessageListComponent, OcChatToolProposalComponent, OcChatTypingIndicatorComponent, OcChatWelcomeComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDividerComponent, OcDrawerComponent, OcDrawerFooterComponent, OcDrawerHeaderComponent, OcDropdownDirective, OcDropdownImports, OcDropdownMenuContentComponent, OcDropdownMenuItemComponent, OcDropdownMenuLabelComponent, OcDropdownService, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcNotificationComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTableComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
4599
4703
  //# sourceMappingURL=otimus-library.mjs.map