@gestio/gds 0.0.1

package/fesm5/gestio-gds.js

@@ -0,0 +1,713 @@
+import { __decorate, __spread } from 'tslib';
+import { Input, Component, NgModule, EventEmitter, Output, ChangeDetectionStrategy, forwardRef, ElementRef, ChangeDetectorRef, HostListener } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+var GdsButtonComponent = /** @class */ (function () {
+    function GdsButtonComponent() {
+        this.variant = 'primary';
+    }
+    GdsButtonComponent.prototype.ngOnInit = function () { };
+    __decorate([
+        Input()
+    ], GdsButtonComponent.prototype, "variant", void 0);
+    GdsButtonComponent = __decorate([
+        Component({
+            selector: 'gds-button',
+            template: "<button class=\"gds-button\" [ngClass]=\"variant\">\n  <ng-content></ng-content>\n</button>\n",
+            styles: ["", ".gds-button{padding:10px 16px;border-radius:8px;border:none;font-family:var(--gds-font-primary,Inter);font-weight:600;cursor:pointer}.gds-button.primary{background:var(--gds-primary);color:#fff}.gds-button.secondary{background:var(--gds-secondary);color:#fff}.gds-button.tertiary{background:var(--gds-tertiary);color:#fff}"]
+        })
+    ], GdsButtonComponent);
+    return GdsButtonComponent;
+}());
+
+var GdsButtonModule = /** @class */ (function () {
+    function GdsButtonModule() {
+    }
+    GdsButtonModule = __decorate([
+        NgModule({
+            declarations: [GdsButtonComponent],
+            imports: [CommonModule],
+            exports: [GdsButtonComponent],
+        })
+    ], GdsButtonModule);
+    return GdsButtonModule;
+}());
+
+var GdsInputComponent = /** @class */ (function () {
+    function GdsInputComponent() {
+        this.id = '';
+        this.placeholder = '';
+        this.type = 'text';
+        this.size = 'md';
+        this.disabled = false;
+        this.invalid = false;
+        this.value = '';
+        this.input = new EventEmitter();
+        this.focus = new EventEmitter();
+        this.blur = new EventEmitter();
+        this.isFocused = false;
+    }
+    GdsInputComponent.prototype.onInput = function (event) {
+        this.input.emit(event);
+    };
+    GdsInputComponent.prototype.onFocus = function () {
+        this.isFocused = true;
+        this.focus.emit();
+    };
+    GdsInputComponent.prototype.onBlur = function () {
+        this.isFocused = false;
+        this.blur.emit();
+    };
+    __decorate([
+        Input()
+    ], GdsInputComponent.prototype, "id", void 0);
+    __decorate([
+        Input()
+    ], GdsInputComponent.prototype, "placeholder", void 0);
+    __decorate([
+        Input()
+    ], GdsInputComponent.prototype, "type", void 0);
+    __decorate([
+        Input()
+    ], GdsInputComponent.prototype, "size", void 0);
+    __decorate([
+        Input()
+    ], GdsInputComponent.prototype, "disabled", void 0);
+    __decorate([
+        Input()
+    ], GdsInputComponent.prototype, "invalid", void 0);
+    __decorate([
+        Input()
+    ], GdsInputComponent.prototype, "value", void 0);
+    __decorate([
+        Output()
+    ], GdsInputComponent.prototype, "input", void 0);
+    __decorate([
+        Output()
+    ], GdsInputComponent.prototype, "focus", void 0);
+    __decorate([
+        Output()
+    ], GdsInputComponent.prototype, "blur", void 0);
+    GdsInputComponent = __decorate([
+        Component({
+            selector: 'gds-input',
+            template: "<div\n  class=\"gds-input-container\"\n  [class.gds-input--invalid]=\"invalid\"\n  [class.gds-input--disabled]=\"disabled\"\n  [class.gds-input--focused]=\"isFocused\"\n  [class.gds-input--sm]=\"size === 'sm'\"\n  [class.gds-input--md]=\"size === 'md'\"\n  [class.gds-input--lg]=\"size === 'lg'\"\n>\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    class=\"gds-input\"\n    [attr.aria-invalid]=\"invalid\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n</div>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            styles: [".gds-input-container{display:flex;flex-direction:column;width:100%}.gds-input-container.gds-input--invalid .gds-input{border-color:var(--danger)}.gds-input-container.gds-input--invalid .gds-input:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(216,44,13,.1)}.gds-input-container.gds-input--disabled .gds-input{opacity:.6;cursor:not-allowed;background-color:var(--bg-disabled)}.gds-input-container.gds-input--focused .gds-input{border-color:var(--primary);box-shadow:0 0 0 3px rgba(28,103,244,.1)}.gds-input-container.gds-input--focused.gds-input--invalid .gds-input{border-color:var(--danger);box-shadow:0 0 0 3px rgba(216,44,13,.1)}.gds-input-container.gds-input--sm .gds-input{height:32px;padding:0 12px;font-size:14px}.gds-input-container.gds-input--md .gds-input{height:40px;padding:0 12px;font-size:14px}.gds-input-container.gds-input--lg .gds-input{height:48px;padding:0 12px;font-size:14px}.gds-input{width:100%;border:1px solid var(--gds-neutral-300);border-radius:6px;height:40px;padding:0 12px;font-size:14px;line-height:1;color:var(--text-foreground);background-color:var(--bg-surface);transition:.2s;box-sizing:border-box;font-family:inherit}.gds-input::-moz-placeholder{color:var(--text-foreground);opacity:.5}.gds-input::placeholder{color:var(--text-foreground);opacity:.5}.gds-input:hover:not(:disabled){border-color:var(--gds-neutral-400)}.gds-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(28,103,244,.1)}.gds-input:disabled{opacity:.6;cursor:not-allowed;background-color:var(--bg-disabled)}"]
+        })
+    ], GdsInputComponent);
+    return GdsInputComponent;
+}());
+
+var GdsInputModule = /** @class */ (function () {
+    function GdsInputModule() {
+    }
+    GdsInputModule = __decorate([
+        NgModule({
+            declarations: [GdsInputComponent],
+            imports: [CommonModule],
+            exports: [GdsInputComponent],
+        })
+    ], GdsInputModule);
+    return GdsInputModule;
+}());
+
+var GdsLabelComponent = /** @class */ (function () {
+    function GdsLabelComponent() {
+        this.required = false;
+        this.error = false;
+        this.disabled = false;
+        this.size = 'md';
+    }
+    GdsLabelComponent.prototype.ngOnInit = function () { };
+    __decorate([
+        Input()
+    ], GdsLabelComponent.prototype, "for", void 0);
+    __decorate([
+        Input()
+    ], GdsLabelComponent.prototype, "required", void 0);
+    __decorate([
+        Input()
+    ], GdsLabelComponent.prototype, "error", void 0);
+    __decorate([
+        Input()
+    ], GdsLabelComponent.prototype, "disabled", void 0);
+    __decorate([
+        Input()
+    ], GdsLabelComponent.prototype, "size", void 0);
+    GdsLabelComponent = __decorate([
+        Component({
+            selector: 'gds-label',
+            template: "<label\n  class=\"gds-label\"\n  [class.gds-label--disabled]=\"disabled\"\n  [class.gds-label--sm]=\"size === 'sm'\"\n  [class.gds-label--md]=\"size === 'md'\"\n  [class.gds-label--lg]=\"size === 'lg'\"\n  [class.gds-label--error]=\"error || required\"\n  [attr.for]=\"for\"\n>\n  <ng-content></ng-content>\n\n  <span *ngIf=\"required\" class=\"gds-label__required\">*</span>\n</label>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            styles: [".gds-label{display:inline-flex;align-items:center;gap:4px;font-weight:var(--font-weight-medium);font-size:.875rem;line-height:calc(1.25 / .875);color:var(--gds-neutral-400);cursor:pointer}.gds-label__required{color:var(--gds-red-500);font-size:.875em}.gds-label--error{color:var(--gds-red-500)}.gds-label--disabled{opacity:.6;cursor:not-allowed}.gds-label--sm{font-size:.75rem;line-height:calc(1.25 / .75)}.gds-label--md{font-size:.875rem;line-height:calc(1.25 / .875)}.gds-label--lg{font-size:1rem;line-height:1.25}"]
+        })
+    ], GdsLabelComponent);
+    return GdsLabelComponent;
+}());
+
+var GdsLabelModule = /** @class */ (function () {
+    function GdsLabelModule() {
+    }
+    GdsLabelModule = __decorate([
+        NgModule({
+            declarations: [GdsLabelComponent],
+            imports: [CommonModule],
+            exports: [GdsLabelComponent],
+        })
+    ], GdsLabelModule);
+    return GdsLabelModule;
+}());
+
+var GdsTextboxComponent = /** @class */ (function () {
+    function GdsTextboxComponent() {
+        this.label = '';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.error = false;
+        this.errorMessage = '';
+        this.helperText = '';
+        this.type = 'text';
+        this.id = "gds-textbox-" + Math.random().toString(36).substr(2, 9);
+        this.size = 'md';
+        this.value = '';
+        this.isFocused = false;
+        this.onChange = function (value) { };
+        this.onTouched = function () { };
+    }
+    GdsTextboxComponent_1 = GdsTextboxComponent;
+    GdsTextboxComponent.prototype.onInput = function (event) {
+        var target = event.target;
+        this.value = target.value;
+        this.onChange(this.value);
+    };
+    GdsTextboxComponent.prototype.onFocus = function () {
+        this.isFocused = true;
+    };
+    GdsTextboxComponent.prototype.onBlur = function () {
+        this.isFocused = false;
+        this.onTouched();
+    };
+    // ControlValueAccessor implementation
+    GdsTextboxComponent.prototype.writeValue = function (value) {
+        this.value = value || '';
+    };
+    GdsTextboxComponent.prototype.registerOnChange = function (fn) {
+        this.onChange = fn;
+    };
+    GdsTextboxComponent.prototype.registerOnTouched = function (fn) {
+        this.onTouched = fn;
+    };
+    GdsTextboxComponent.prototype.setDisabledState = function (isDisabled) {
+        this.disabled = isDisabled;
+    };
+    var GdsTextboxComponent_1;
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "label", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "placeholder", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "required", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "disabled", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "error", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "errorMessage", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "helperText", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "type", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "id", void 0);
+    __decorate([
+        Input()
+    ], GdsTextboxComponent.prototype, "size", void 0);
+    GdsTextboxComponent = GdsTextboxComponent_1 = __decorate([
+        Component({
+            selector: 'gds-textbox',
+            template: "<div class=\"gds-textbox\">\n  <!-- Label -->\n  <gds-label\n    [for]=\"id\"\n    [size]=\"size\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [error]=\"error\"\n    *ngIf=\"label\"\n  >\n    {{ label }}\n  </gds-label>\n\n  <!-- Input Field -->\n  <gds-input\n    [id]=\"id\"\n    [type]=\"type\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [invalid]=\"error\"\n    [size]=\"size\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  ></gds-input>\n\n  <div\n    *ngIf=\"helperText || errorMessage\"\n    [id]=\"id + '-description'\"\n    class=\"gds-textbox__description\"\n    [class.gds-textbox__description--error]=\"error && errorMessage\"\n  >\n    {{ error && errorMessage ? errorMessage : helperText }}\n  </div>\n</div>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return GdsTextboxComponent_1; }),
+                    multi: true,
+                },
+            ],
+            styles: [".gds-textbox{display:flex;flex-direction:column;width:100%;gap:4px}.gds-textbox__description{font-size:.75rem;color:var(--gds-neutral-400)}.gds-textbox__description--error{color:var(--gds-red-500)}.gds-textbox__error-icon{margin-right:4px;color:var(--gds-red-500)}"]
+        })
+    ], GdsTextboxComponent);
+    return GdsTextboxComponent;
+}());
+
+var GdsTextboxModule = /** @class */ (function () {
+    function GdsTextboxModule() {
+    }
+    GdsTextboxModule = __decorate([
+        NgModule({
+            declarations: [GdsTextboxComponent],
+            imports: [CommonModule, GdsLabelModule, GdsInputModule],
+            exports: [GdsTextboxComponent],
+        })
+    ], GdsTextboxModule);
+    return GdsTextboxModule;
+}());
+
+var GdsSelectboxComponent = /** @class */ (function () {
+    function GdsSelectboxComponent(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.label = '';
+        this.placeholder = 'Selecione...';
+        this.required = false;
+        this.disabled = false;
+        this.error = false;
+        this.errorMessage = '';
+        this.helperText = '';
+        this.id = "gds-selectbox-" + Math.random().toString(36).substr(2, 9);
+        this.size = 'md';
+        this.options = [];
+        this.searchTerm = '';
+        this.selectedValue = null;
+        this.isOpen = false;
+        this.isFocused = false;
+        this.filteredOptions = [];
+        this.onChange = function (value) { };
+        this.onTouched = function () { };
+    }
+    GdsSelectboxComponent_1 = GdsSelectboxComponent;
+    GdsSelectboxComponent.prototype.ngOnInit = function () {
+        this.filteredOptions = __spread(this.options);
+    };
+    GdsSelectboxComponent.prototype.onSearchInput = function (event) {
+        var target = event.target;
+        this.searchTerm = target.value;
+        this.filterOptions();
+    };
+    GdsSelectboxComponent.prototype.filterOptions = function () {
+        if (!this.searchTerm) {
+            this.filteredOptions = __spread(this.options);
+        }
+        else {
+            var term_1 = this.searchTerm.toLowerCase();
+            this.filteredOptions = this.options.filter(function (option) {
+                return option.display.toLowerCase().includes(term_1);
+            });
+        }
+        this.cdr.markForCheck();
+    };
+    GdsSelectboxComponent.prototype.toggleDropdown = function () {
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.filterOptions();
+            }
+            this.cdr.markForCheck();
+        }
+    };
+    GdsSelectboxComponent.prototype.clearSelection = function () {
+        this.selectedValue = null;
+        this.searchTerm = '';
+        this.isOpen = false;
+        this.onChange(null);
+        this.cdr.markForCheck();
+    };
+    GdsSelectboxComponent.prototype.selectOption = function (option) {
+        this.selectedValue = option.value;
+        this.searchTerm = option.display;
+        this.isOpen = false;
+        this.onChange(this.selectedValue);
+        this.cdr.markForCheck();
+    };
+    GdsSelectboxComponent.prototype.onFocus = function () {
+        this.isFocused = true;
+        this.isOpen = true;
+        this.cdr.markForCheck();
+    };
+    GdsSelectboxComponent.prototype.onBlur = function () {
+        var _this = this;
+        setTimeout(function () {
+            _this.isFocused = false;
+            _this.isOpen = false;
+            _this.onTouched();
+            // Restaura o display da opção selecionada se o searchTerm não corresponder
+            if (_this.selectedValue !== null) {
+                var selected = _this.options.find(function (opt) { return opt.value === _this.selectedValue; });
+                if (selected) {
+                    _this.searchTerm = selected.display;
+                }
+            }
+            else {
+                _this.searchTerm = '';
+            }
+            _this.cdr.markForCheck();
+        }, 200);
+    };
+    GdsSelectboxComponent.prototype.onClickOutside = function (event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+            this.cdr.markForCheck();
+        }
+    };
+    // ControlValueAccessor implementation
+    GdsSelectboxComponent.prototype.writeValue = function (value) {
+        this.selectedValue = value;
+        if (value !== null && value !== undefined) {
+            var selected = this.options.find(function (opt) { return opt.value === value; });
+            if (selected) {
+                this.searchTerm = selected.display;
+            }
+        }
+        else {
+            this.searchTerm = '';
+        }
+        this.cdr.markForCheck();
+    };
+    GdsSelectboxComponent.prototype.registerOnChange = function (fn) {
+        this.onChange = fn;
+    };
+    GdsSelectboxComponent.prototype.registerOnTouched = function (fn) {
+        this.onTouched = fn;
+    };
+    GdsSelectboxComponent.prototype.setDisabledState = function (isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    };
+    var GdsSelectboxComponent_1;
+    GdsSelectboxComponent.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "label", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "placeholder", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "required", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "disabled", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "error", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "errorMessage", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "helperText", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "id", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "size", void 0);
+    __decorate([
+        Input()
+    ], GdsSelectboxComponent.prototype, "options", void 0);
+    __decorate([
+        HostListener('document:click', ['$event'])
+    ], GdsSelectboxComponent.prototype, "onClickOutside", null);
+    GdsSelectboxComponent = GdsSelectboxComponent_1 = __decorate([
+        Component({
+            selector: 'gds-selectbox',
+            template: "<div class=\"gds-selectbox\">\n  <!-- Label -->\n  <gds-label\n    [for]=\"id\"\n    [size]=\"size\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [error]=\"error\"\n    *ngIf=\"label\"\n  >\n    {{ label }}\n  </gds-label>\n\n  <!-- Select Input -->\n  <div\n    class=\"gds-selectbox__control\"\n    [class.gds-selectbox__control--open]=\"isOpen\"\n    [class.gds-selectbox__control--error]=\"error\"\n    [class.gds-selectbox__control--disabled]=\"disabled\"\n    [class.gds-selectbox__control--sm]=\"size === 'sm'\"\n    [class.gds-selectbox__control--md]=\"size === 'md'\"\n    [class.gds-selectbox__control--lg]=\"size === 'lg'\"\n  >\n    <input\n      [id]=\"id\"\n      type=\"text\"\n      class=\"gds-selectbox__input\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"searchTerm\"\n      (input)=\"onSearchInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      autocomplete=\"off\"\n    />\n    <button\n      type=\"button\"\n      class=\"gds-selectbox__clear\"\n      *ngIf=\"selectedValue !== null && !disabled\"\n      (click)=\"clearSelection()\"\n      tabindex=\"-1\"\n      title=\"Limpar sele\u00E7\u00E3o\"\n    >\n      <svg\n        class=\"gds-selectbox__clear-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n        <path\n          d=\"M10.5 5.5L5.5 10.5M5.5 5.5L10.5 10.5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n    <button\n      type=\"button\"\n      class=\"gds-selectbox__toggle\"\n      [disabled]=\"disabled\"\n      (click)=\"toggleDropdown()\"\n      tabindex=\"-1\"\n    >\n      <svg\n        class=\"gds-selectbox__icon\"\n        [class.gds-selectbox__icon--open]=\"isOpen\"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M5 7.5L10 12.5L15 7.5\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Dropdown -->\n  <div class=\"gds-selectbox__dropdown\" *ngIf=\"isOpen\">\n    <div class=\"gds-selectbox__options\">\n      <div\n        *ngFor=\"let option of filteredOptions\"\n        class=\"gds-selectbox__option\"\n        [class.gds-selectbox__option--selected]=\"option.value === selectedValue\"\n        (click)=\"selectOption(option)\"\n      >\n        {{ option.display }}\n      </div>\n      <div\n        *ngIf=\"filteredOptions.length === 0\"\n        class=\"gds-selectbox__option gds-selectbox__option--empty\"\n      >\n        Nenhum resultado encontrado\n      </div>\n    </div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"helperText || errorMessage\"\n    [id]=\"id + '-description'\"\n    class=\"gds-selectbox__description\"\n    [class.gds-selectbox__description--error]=\"error && errorMessage\"\n  >\n    {{ error && errorMessage ? errorMessage : helperText }}\n  </div>\n</div>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return GdsSelectboxComponent_1; }),
+                    multi: true,
+                },
+            ],
+            styles: [".gds-selectbox{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.gds-selectbox__control{position:relative;display:flex;align-items:center;background-color:var(--bg-surface);border:1px solid var(--gds-neutral-300);border-radius:6px;transition:.2s}.gds-selectbox__control:hover:not(.gds-selectbox__control--disabled){border-color:var(--gds-neutral-400)}.gds-selectbox__control--open,.gds-selectbox__control:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(28,103,244,.1)}.gds-selectbox__control--error{border-color:var(--danger)}.gds-selectbox__control--error:focus-within{box-shadow:0 0 0 3px rgba(216,44,13,.1)}.gds-selectbox__control--disabled{background-color:var(--bg-disabled);cursor:not-allowed;opacity:.6}.gds-selectbox__control--sm{height:32px}.gds-selectbox__control--md{height:40px}.gds-selectbox__control--lg{height:48px}.gds-selectbox__input{flex:1;border:none;outline:0;background:0 0;padding:0 12px;font-size:14px;color:var(--text-foreground);font-family:inherit}.gds-selectbox__input::-moz-placeholder{color:var(--text-foreground)}.gds-selectbox__input::placeholder{color:var(--text-foreground)}.gds-selectbox__input:disabled{cursor:not-allowed}.gds-selectbox__clear{display:flex;align-items:center;justify-content:center;padding:0 4px;border:none;background:0 0;cursor:pointer;color:var(--text-foreground);opacity:.7;transition:color .2s}.gds-selectbox__clear:hover{opacity:1}.gds-selectbox__clear-icon{width:16px;height:16px}.gds-selectbox__toggle{display:flex;align-items:center;justify-content:center;padding:0 8px;border:none;background:0 0;cursor:pointer;color:var(--text-foreground);transition:color .2s}.gds-selectbox__toggle:hover:not(:disabled){color:var(--text-foreground)}.gds-selectbox__toggle:disabled{cursor:not-allowed}.gds-selectbox__icon{transition:transform .2s}.gds-selectbox__icon--open{transform:rotate(180deg)}.gds-selectbox__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background-color:var(--bg-surface);border:1px solid var(--gds-neutral-300);border-radius:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);max-height:300px;overflow:hidden}.gds-selectbox__options{max-height:300px;overflow-y:auto}.gds-selectbox__option{padding:10px 12px;cursor:pointer;font-size:14px;color:var(--text-foreground);transition:background-color .15s}.gds-selectbox__option:hover{background-color:var(--bg-muted)}.gds-selectbox__option--selected{background-color:var(--gds-brand-100);color:var(--primary);font-weight:500}.gds-selectbox__option--selected:hover{background-color:var(--gds-brand-200)}.gds-selectbox__option--empty{color:var(--text-muted);cursor:default;font-style:italic}.gds-selectbox__option--empty:hover{background-color:transparent}.gds-selectbox__description{margin-top:6px;font-size:12px;color:var(--text-muted)}.gds-selectbox__description--error{color:var(--danger)}"]
+        })
+    ], GdsSelectboxComponent);
+    return GdsSelectboxComponent;
+}());
+
+var GdsSelectboxModule = /** @class */ (function () {
+    function GdsSelectboxModule() {
+    }
+    GdsSelectboxModule = __decorate([
+        NgModule({
+            declarations: [GdsSelectboxComponent],
+            imports: [CommonModule, GdsLabelModule],
+            exports: [GdsSelectboxComponent],
+        })
+    ], GdsSelectboxModule);
+    return GdsSelectboxModule;
+}());
+
+var GdsComponent = /** @class */ (function () {
+    function GdsComponent() {
+    }
+    GdsComponent.prototype.ngOnInit = function () {
+    };
+    GdsComponent = __decorate([
+        Component({
+            selector: 'lib-gds',
+            template: "\n    <p>\n      gds works!\n    </p>\n  "
+        })
+    ], GdsComponent);
+    return GdsComponent;
+}());
+
+var GdsModule = /** @class */ (function () {
+    function GdsModule() {
+    }
+    GdsModule = __decorate([
+        NgModule({
+            declarations: [GdsComponent],
+            imports: [
+                CommonModule,
+                GdsButtonModule,
+                GdsInputModule,
+                GdsLabelModule,
+                GdsTextboxModule,
+                GdsSelectboxModule,
+            ],
+            exports: [GdsComponent],
+        })
+    ], GdsModule);
+    return GdsModule;
+}());
+
+// BASE COLORS
+var BASE_COLORS = ['gestio-dark', 'gestio-light'];
+// PRIMARY COLORS
+var PRIMARY_COLORS = [
+    'primary',
+    'gestio-primary',
+    'gestio-primary-hover',
+];
+// SECONDARY COLORS
+var SECONDARY_COLORS = ['gestio-secondary'];
+// TERTIARY COLORS
+var TERTIARY_COLORS = ['gestio-tertiary'];
+// BRAND COLORS
+var BRAND_COLORS = [
+    'gestio-brand-25',
+    'gestio-brand-50',
+    'gestio-brand-100',
+    'gestio-brand-200',
+    'gestio-brand-300',
+    'gestio-brand-400',
+    'gestio-brand-500',
+    'gestio-brand-600',
+    'gestio-brand-700',
+    'gestio-brand-800',
+    'gestio-brand-900',
+];
+// NEUTRAL COLORS
+var NEUTRAL_COLORS = [
+    'gestio-neutral-25',
+    'gestio-neutral-50',
+    'gestio-neutral-100',
+    'gestio-neutral-200',
+    'gestio-neutral-300',
+    'gestio-neutral-400',
+    'gestio-neutral-500',
+    'gestio-neutral-600',
+    'gestio-neutral-700',
+    'gestio-neutral-800',
+    'gestio-neutral-900',
+    'gestio-neutral-1000',
+];
+// GREEN COLORS
+var GREEN_COLORS = [
+    'gestio-green-25',
+    'gestio-green-50',
+    'gestio-green-100',
+    'gestio-green-200',
+    'gestio-green-300',
+    'gestio-green-400',
+    'gestio-green-500',
+    'gestio-green-600',
+    'gestio-green-700',
+    'gestio-green-800',
+    'gestio-green-900',
+];
+// RED COLORS
+var RED_COLORS = [
+    'gestio-red-25',
+    'gestio-red-50',
+    'gestio-red-100',
+    'gestio-red-200',
+    'gestio-red-300',
+    'gestio-red-400',
+    'gestio-red-500',
+    'gestio-red-600',
+    'gestio-red-700',
+    'gestio-red-800',
+    'gestio-red-900',
+];
+// BLUE COLORS
+var BLUE_COLORS = [
+    'gestio-blue-25',
+    'gestio-blue-50',
+    'gestio-blue-100',
+    'gestio-blue-200',
+    'gestio-blue-300',
+    'gestio-blue-400',
+    'gestio-blue-500',
+    'gestio-blue-600',
+    'gestio-blue-700',
+    'gestio-blue-800',
+    'gestio-blue-900',
+];
+// AMBER COLORS
+var AMBER_COLORS = [
+    'gestio-amber-25',
+    'gestio-amber-50',
+    'gestio-amber-100',
+    'gestio-amber-200',
+    'gestio-amber-300',
+    'gestio-amber-400',
+    'gestio-amber-500',
+    'gestio-amber-600',
+    'gestio-amber-700',
+    'gestio-amber-800',
+    'gestio-amber-900',
+];
+// TEAL COLORS
+var TEAL_COLORS = [
+    'gestio-teal-25',
+    'gestio-teal-50',
+    'gestio-teal-100',
+    'gestio-teal-200',
+    'gestio-teal-300',
+    'gestio-teal-400',
+    'gestio-teal-500',
+    'gestio-teal-600',
+    'gestio-teal-700',
+    'gestio-teal-800',
+    'gestio-teal-900',
+];
+// PURPLE COLORS
+var PURPLE_COLORS = [
+    'gestio-purple-25',
+    'gestio-purple-50',
+    'gestio-purple-100',
+    'gestio-purple-200',
+    'gestio-purple-300',
+    'gestio-purple-400',
+    'gestio-purple-500',
+    'gestio-purple-600',
+    'gestio-purple-700',
+    'gestio-purple-800',
+    'gestio-purple-900',
+];
+// EMERALD COLORS
+var EMERALD_COLORS = [
+    'gestio-emerald-25',
+    'gestio-emerald-50',
+    'gestio-emerald-100',
+    'gestio-emerald-200',
+    'gestio-emerald-300',
+    'gestio-emerald-400',
+    'gestio-emerald-500',
+    'gestio-emerald-600',
+    'gestio-emerald-700',
+    'gestio-emerald-800',
+    'gestio-emerald-900',
+];
+// MAGENTA COLORS
+var MAGENTA_COLORS = [
+    'gestio-magenta-25',
+    'gestio-magenta-50',
+    'gestio-magenta-100',
+    'gestio-magenta-200',
+    'gestio-magenta-300',
+    'gestio-magenta-400',
+    'gestio-magenta-500',
+    'gestio-magenta-600',
+    'gestio-magenta-700',
+    'gestio-magenta-800',
+    'gestio-magenta-900',
+];
+// YELLOW COLORS
+var YELLOW_COLORS = [
+    'gestio-yellow-25',
+    'gestio-yellow-50',
+    'gestio-yellow-100',
+    'gestio-yellow-200',
+    'gestio-yellow-300',
+    'gestio-yellow-400',
+    'gestio-yellow-500',
+    'gestio-yellow-600',
+    'gestio-yellow-700',
+    'gestio-yellow-800',
+    'gestio-yellow-900',
+];
+// LIME COLORS
+var LIME_COLORS = [
+    'gestio-lime-25',
+    'gestio-lime-50',
+    'gestio-lime-100',
+    'gestio-lime-200',
+    'gestio-lime-300',
+    'gestio-lime-400',
+    'gestio-lime-500',
+    'gestio-lime-600',
+    'gestio-lime-700',
+    'gestio-lime-800',
+    'gestio-lime-900',
+];
+// ALL COLORS
+var ALL_COLORS = __spread(BASE_COLORS, PRIMARY_COLORS, SECONDARY_COLORS, TERTIARY_COLORS, BRAND_COLORS, NEUTRAL_COLORS, GREEN_COLORS, RED_COLORS, BLUE_COLORS, AMBER_COLORS, TEAL_COLORS, PURPLE_COLORS, EMERALD_COLORS, MAGENTA_COLORS, YELLOW_COLORS, LIME_COLORS);
+
+var TYPOGRAPHY_TOKENS = [
+    'gds-heading-3xl',
+    'gds-heading-2xl',
+    'gds-heading-xl',
+    'gds-heading-lg',
+    'gds-heading-md',
+    'gds-heading-sm',
+    'gds-heading-xs',
+    'gds-subheading',
+];
+var TYPOGRAPHY_DESCRIPTIONS = {
+    'gds-heading-3xl': 'Largest heading for hero sections and major page titles',
+    'gds-heading-2xl': 'Secondary large heading for section dividers',
+    'gds-heading-xl': 'Large heading for important content blocks',
+    'gds-heading-lg': 'Medium heading for subsections',
+    'gds-heading-md': 'Standard heading for content areas',
+    'gds-heading-sm': 'Small heading for cards and components',
+    'gds-heading-xs': 'Smallest heading for micro components',
+    'gds-subheading': 'Supporting text for headings and descriptions',
+};
+var TYPOGRAPHY_EXAMPLES = {
+    'gds-heading-3xl': 'Design System',
+    'gds-heading-2xl': 'Foundation',
+    'gds-heading-xl': 'Typography',
+    'gds-heading-lg': 'Heading Large',
+    'gds-heading-md': 'Heading Medium',
+    'gds-heading-sm': 'Heading Small',
+    'gds-heading-xs': 'Heading XS',
+    'gds-subheading': 'Supporting text that provides additional context and helps establish hierarchy',
+};
+
+// Components / Modules
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ALL_COLORS, AMBER_COLORS, BASE_COLORS, BLUE_COLORS, BRAND_COLORS, EMERALD_COLORS, GREEN_COLORS, GdsButtonComponent, GdsButtonModule, GdsComponent, GdsInputComponent, GdsInputModule, GdsLabelComponent, GdsLabelModule, GdsModule, GdsSelectboxComponent, GdsSelectboxModule, GdsTextboxComponent, GdsTextboxModule, LIME_COLORS, MAGENTA_COLORS, NEUTRAL_COLORS, PRIMARY_COLORS, PURPLE_COLORS, RED_COLORS, SECONDARY_COLORS, TEAL_COLORS, TERTIARY_COLORS, TYPOGRAPHY_DESCRIPTIONS, TYPOGRAPHY_EXAMPLES, TYPOGRAPHY_TOKENS, YELLOW_COLORS };
+//# sourceMappingURL=gestio-gds.js.map