@ng-solid/design-system 22.4.1 → 22.4.2
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.
|
@@ -3501,7 +3501,7 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
3501
3501
|
useExisting: NsDropdownComponent,
|
|
3502
3502
|
multi: true
|
|
3503
3503
|
}
|
|
3504
|
-
], queries: [{ propertyName: "contentItems", predicate: NsDropdownItemDirective, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >\n @if (selectedDot(); as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n @if (item.dot; as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);margin-bottom:var(--ns-component-dropdown-label-gap);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__dot{display:inline-block;flex-shrink:0;border-radius:calc(infinity * 1px);vertical-align:middle;inline-size:var(--ns-component-dropdown-dot-size);block-size:var(--ns-component-dropdown-dot-size);margin-inline-end:var(--ns-component-dropdown-trigger-gap);background:var(--ns-component-dropdown-dot-neutral)}.ns-dropdown__dot--primary{background:var(--ns-component-dropdown-dot-primary)}.ns-dropdown__dot--success{background:var(--ns-component-dropdown-dot-success)}.ns-dropdown__dot--warning{background:var(--ns-component-dropdown-dot-warning)}.ns-dropdown__dot--danger{background:var(--ns-component-dropdown-dot-danger)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsSkeletonComponent, selector: "ns-skeleton", inputs: ["width", "height", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3504
|
+
], queries: [{ propertyName: "contentItems", predicate: NsDropdownItemDirective, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >\n @if (selectedDot(); as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n @if (item.dot; as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);margin-bottom:var(--ns-component-dropdown-label-gap);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__dot{display:inline-block;flex-shrink:0;border-radius:calc(infinity * 1px);vertical-align:middle;inline-size:var(--ns-component-dropdown-dot-size);block-size:var(--ns-component-dropdown-dot-size);margin-inline-end:var(--ns-component-dropdown-trigger-gap);background:var(--ns-component-dropdown-dot-neutral)}.ns-dropdown__dot--primary{background:var(--ns-component-dropdown-dot-primary)}.ns-dropdown__dot--success{background:var(--ns-component-dropdown-dot-success)}.ns-dropdown__dot--warning{background:var(--ns-component-dropdown-dot-warning)}.ns-dropdown__dot--danger{background:var(--ns-component-dropdown-dot-danger)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;flex-shrink:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{flex-shrink:0;padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{flex-shrink:0;text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsSkeletonComponent, selector: "ns-skeleton", inputs: ["width", "height", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3505
3505
|
}
|
|
3506
3506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, decorators: [{
|
|
3507
3507
|
type: Component,
|
|
@@ -3517,7 +3517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3517
3517
|
useExisting: NsDropdownComponent,
|
|
3518
3518
|
multi: true
|
|
3519
3519
|
}
|
|
3520
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >\n @if (selectedDot(); as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n @if (item.dot; as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);margin-bottom:var(--ns-component-dropdown-label-gap);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__dot{display:inline-block;flex-shrink:0;border-radius:calc(infinity * 1px);vertical-align:middle;inline-size:var(--ns-component-dropdown-dot-size);block-size:var(--ns-component-dropdown-dot-size);margin-inline-end:var(--ns-component-dropdown-trigger-gap);background:var(--ns-component-dropdown-dot-neutral)}.ns-dropdown__dot--primary{background:var(--ns-component-dropdown-dot-primary)}.ns-dropdown__dot--success{background:var(--ns-component-dropdown-dot-success)}.ns-dropdown__dot--warning{background:var(--ns-component-dropdown-dot-warning)}.ns-dropdown__dot--danger{background:var(--ns-component-dropdown-dot-danger)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3520
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >\n @if (selectedDot(); as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n @if (item.dot; as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);margin-bottom:var(--ns-component-dropdown-label-gap);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__dot{display:inline-block;flex-shrink:0;border-radius:calc(infinity * 1px);vertical-align:middle;inline-size:var(--ns-component-dropdown-dot-size);block-size:var(--ns-component-dropdown-dot-size);margin-inline-end:var(--ns-component-dropdown-trigger-gap);background:var(--ns-component-dropdown-dot-neutral)}.ns-dropdown__dot--primary{background:var(--ns-component-dropdown-dot-primary)}.ns-dropdown__dot--success{background:var(--ns-component-dropdown-dot-success)}.ns-dropdown__dot--warning{background:var(--ns-component-dropdown-dot-warning)}.ns-dropdown__dot--danger{background:var(--ns-component-dropdown-dot-danger)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;flex-shrink:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{flex-shrink:0;padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{flex-shrink:0;text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3521
3521
|
}], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }], contentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsDropdownItemDirective), { isSignal: true }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{
|
|
3522
3522
|
type: ViewChild,
|
|
3523
3523
|
args: ['trigger']
|