import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class StoreUserDropdownComponent {
    // @Input() title: string = 'Items';  // Default title (Stores, Approvers, etc.)
    title = '';
    items = [];
    isOpen = false;
    // showAll = false;
    toggleDropdown() {
        this.isOpen = !this.isOpen;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreUserDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StoreUserDropdownComponent, selector: "lib-store-user-dropdown", inputs: { title: "title", items: "items" }, ngImport: i0, template: "<div class=\"relative inline-block text-left\">\r\n  <!-- Display first 5 stores inline -->\r\n  <div class=\"flex flex-wrap gap-2 mb-2\">\r\n    <span *ngFor=\"let item of items.slice(0, 5); let last = last\" class=\"py-1\">\r\n      {{ item }}<span *ngIf=\"!last\">,</span>\r\n    </span>\r\n  </div>\r\n\r\n  <!-- Show dropdown only if more than 5 stores exist -->\r\n  <span *ngIf=\"items.length > 5\" \r\n        (click)=\"toggleDropdown()\" \r\n        [ngClass]=\"isOpen ? 'showlessbutton' : 'showmorebutton'\"\r\n        class=\"px-4 py-2 cursor-pointer flex items-center gap-2\">\r\n    {{ isOpen ? 'Show Less' : 'Show More' }}\r\n    <svg *ngIf=\"!isOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n      <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n    <svg *ngIf=\"isOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n      <path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Dropdown -->\r\n  <div *ngIf=\"isOpen\" class=\"absolute left-0 mt-2 w-40 z-10 dropdownbar\">\r\n    <!-- Header with Close Button -->\r\n    <div class=\"storeend px-4 py-2 flex justify-between items-center\">\r\n      <span class=\"storestext font-semibold\">{{ title }}</span>\r\n      <span (click)=\"toggleDropdown()\" class=\"cursor-pointer\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#009BF3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </span>\r\n    </div>\r\n\r\n    <!-- Extra stores in dropdown -->\r\n    <div class=\"max-h-60 overflow-y-auto\">\r\n      <div *ngFor=\"let item of items.slice(5)\" class=\"px-4 py-2 hover:bg-gray-200 cursor-pointer\">\r\n        {{ item }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".max-h-60{max-height:15rem}.showlessbutton{justify-content:center;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-700, #009BF3);color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-transform:capitalize}.storestext{color:var(--Primary-700, #009BF3);font-size:18px;font-style:normal;font-weight:500;line-height:28px}.storeend{display:flex;justify-content:space-between!important;border-bottom:1px solid var(--Primary-700, #009BF3)}.dropdownbar{margin-right:32%;border-radius:8px;border:1px solid var(--Gray-400, #98A2B3);background:#fff}.showmorebutton{justify-content:center;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Gray-500, #667085);color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreUserDropdownComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-store-user-dropdown', template: "<div class=\"relative inline-block text-left\">\r\n  <!-- Display first 5 stores inline -->\r\n  <div class=\"flex flex-wrap gap-2 mb-2\">\r\n    <span *ngFor=\"let item of items.slice(0, 5); let last = last\" class=\"py-1\">\r\n      {{ item }}<span *ngIf=\"!last\">,</span>\r\n    </span>\r\n  </div>\r\n\r\n  <!-- Show dropdown only if more than 5 stores exist -->\r\n  <span *ngIf=\"items.length > 5\" \r\n        (click)=\"toggleDropdown()\" \r\n        [ngClass]=\"isOpen ? 'showlessbutton' : 'showmorebutton'\"\r\n        class=\"px-4 py-2 cursor-pointer flex items-center gap-2\">\r\n    {{ isOpen ? 'Show Less' : 'Show More' }}\r\n    <svg *ngIf=\"!isOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n      <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n    <svg *ngIf=\"isOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n      <path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Dropdown -->\r\n  <div *ngIf=\"isOpen\" class=\"absolute left-0 mt-2 w-40 z-10 dropdownbar\">\r\n    <!-- Header with Close Button -->\r\n    <div class=\"storeend px-4 py-2 flex justify-between items-center\">\r\n      <span class=\"storestext font-semibold\">{{ title }}</span>\r\n      <span (click)=\"toggleDropdown()\" class=\"cursor-pointer\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#009BF3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </span>\r\n    </div>\r\n\r\n    <!-- Extra stores in dropdown -->\r\n    <div class=\"max-h-60 overflow-y-auto\">\r\n      <div *ngFor=\"let item of items.slice(5)\" class=\"px-4 py-2 hover:bg-gray-200 cursor-pointer\">\r\n        {{ item }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".max-h-60{max-height:15rem}.showlessbutton{justify-content:center;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-700, #009BF3);color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-transform:capitalize}.storestext{color:var(--Primary-700, #009BF3);font-size:18px;font-style:normal;font-weight:500;line-height:28px}.storeend{display:flex;justify-content:space-between!important;border-bottom:1px solid var(--Primary-700, #009BF3)}.dropdownbar{margin-right:32%;border-radius:8px;border:1px solid var(--Gray-400, #98A2B3);background:#fff}.showmorebutton{justify-content:center;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Gray-500, #667085);color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-transform:capitalize}\n"] }]
        }], propDecorators: { title: [{
                type: Input
            }], items: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 