@almatar/smart-booking-dashboard 0.0.1

package/esm2022/lib/components/booking-input/booking-input.component.mjs

@@ -0,0 +1,43 @@
+import { Component, input, output, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from 'primeng/button';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "primeng/selectbutton";
+import * as i3 from "primeng/inputtext";
+import * as i4 from "primeng/button";
+import * as i5 from "primeng/tooltip";
+export class SbdBookingInputComponent {
+    constructor() {
+        this.loading = input(false);
+        this.product = model('flight');
+        this.bookingId = model('');
+        this.lookup = output();
+        this.productOptions = [
+            { label: '✈ Flight', value: 'flight' },
+        ];
+        this.demoIds = [
+            { label: 'Demo Flight: ALM-20481', value: 'ALM-20481' },
+            { label: 'Demo Hotel: ALM-HTL-9921', value: 'ALM-HTL-9921' },
+        ];
+    }
+    fillDemo(id) {
+        const product = id.includes('HTL') ? 'hotel' : 'flight';
+        this.product.set(product);
+        this.bookingId.set(id);
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter')
+            this.lookup.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdBookingInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SbdBookingInputComponent, isStandalone: true, selector: "app-sbd-booking-input", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { product: "productChange", bookingId: "bookingIdChange", lookup: "lookup" }, ngImport: i0, template: "<div class=\"sbd-booking-input\">\n  <p-selectButton\n    [(ngModel)]=\"product\"\n    [options]=\"productOptions\"\n    optionLabel=\"label\"\n    optionValue=\"value\"\n    optionDisabled=\"disabled\">\n    <ng-template pTemplate=\"item\" let-item>\n      <span\n        [pTooltip]=\"item.disabled ? 'Coming soon' : null\"\n        tooltipPosition=\"bottom\"\n        style=\"pointer-events: auto; display: inline-block;\">\n        {{ item.label }}\n      </span>\n    </ng-template>\n  </p-selectButton>\n  <div class=\"sbd-booking-input__row\">\n    <div class=\"sbd-booking-input__field-wrap\">\n      <i class=\"pi pi-search sbd-booking-input__icon\"></i>\n      <input pInputText class=\"sbd-booking-input__field\" placeholder=\"Enter Booking ID\"\n        [(ngModel)]=\"bookingId\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" spellcheck=\"false\" />\n    </div>\n    <button pButton label=\"Lookup \u2192\" [disabled]=\"!bookingId().trim()\" (click)=\"lookup.emit()\" class=\"sbd-booking-input__btn\"></button>\n  </div>\n</div>\n", styles: [".sbd-booking-input{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:20px;display:flex;flex-direction:column;gap:14px}.sbd-booking-input__row{display:flex;gap:10px;align-items:center}.sbd-booking-input__field-wrap{flex:1;position:relative;display:flex;align-items:center}.sbd-booking-input__icon{position:absolute;left:12px;color:#94a3b8;font-size:14px;pointer-events:none;z-index:1}.sbd-booking-input__field{width:100%!important;padding-left:36px!important;height:44px;font-size:14px!important}.sbd-booking-input__btn{height:44px;white-space:nowrap}.sbd-booking-input__demos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sbd-booking-input__demos-label{font-size:11.5px;color:#94a3b8}.sbd-booking-input__chip{padding:4px 10px;border-radius:20px;border:1px solid #e2e8f0;background:#f8fafc;color:#1e2e4a;font-size:11.5px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}.sbd-booking-input__chip:hover{border-color:#3b82f6;background:#eff6ff;color:#3b82f6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdBookingInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-booking-input', standalone: true, imports: [FormsModule, SelectButtonModule, InputTextModule, ButtonModule, TooltipModule], template: "<div class=\"sbd-booking-input\">\n  <p-selectButton\n    [(ngModel)]=\"product\"\n    [options]=\"productOptions\"\n    optionLabel=\"label\"\n    optionValue=\"value\"\n    optionDisabled=\"disabled\">\n    <ng-template pTemplate=\"item\" let-item>\n      <span\n        [pTooltip]=\"item.disabled ? 'Coming soon' : null\"\n        tooltipPosition=\"bottom\"\n        style=\"pointer-events: auto; display: inline-block;\">\n        {{ item.label }}\n      </span>\n    </ng-template>\n  </p-selectButton>\n  <div class=\"sbd-booking-input__row\">\n    <div class=\"sbd-booking-input__field-wrap\">\n      <i class=\"pi pi-search sbd-booking-input__icon\"></i>\n      <input pInputText class=\"sbd-booking-input__field\" placeholder=\"Enter Booking ID\"\n        [(ngModel)]=\"bookingId\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" spellcheck=\"false\" />\n    </div>\n    <button pButton label=\"Lookup \u2192\" [disabled]=\"!bookingId().trim()\" (click)=\"lookup.emit()\" class=\"sbd-booking-input__btn\"></button>\n  </div>\n</div>\n", styles: [".sbd-booking-input{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:20px;display:flex;flex-direction:column;gap:14px}.sbd-booking-input__row{display:flex;gap:10px;align-items:center}.sbd-booking-input__field-wrap{flex:1;position:relative;display:flex;align-items:center}.sbd-booking-input__icon{position:absolute;left:12px;color:#94a3b8;font-size:14px;pointer-events:none;z-index:1}.sbd-booking-input__field{width:100%!important;padding-left:36px!important;height:44px;font-size:14px!important}.sbd-booking-input__btn{height:44px;white-space:nowrap}.sbd-booking-input__demos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sbd-booking-input__demos-label{font-size:11.5px;color:#94a3b8}.sbd-booking-input__chip{padding:4px 10px;border-radius:20px;border:1px solid #e2e8f0;background:#f8fafc;color:#1e2e4a;font-size:11.5px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}.sbd-booking-input__chip:hover{border-color:#3b82f6;background:#eff6ff;color:#3b82f6}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9va2luZy1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zbWFydC1ib29raW5nLWRhc2hib2FyZC9zcmMvbGliL2NvbXBvbmVudHMvYm9va2luZy1pbnB1dC9ib29raW5nLWlucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NtYXJ0LWJvb2tpbmctZGFzaGJvYXJkL3NyYy9saWIvY29tcG9uZW50cy9ib29raW5nLWlucHV0L2Jvb2tpbmctaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7Ozs7QUFZaEQsTUFBTSxPQUFPLHdCQUF3QjtJQVByQztRQVFFLFlBQU8sR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkIsWUFBTyxHQUFHLEtBQUssQ0FBYyxRQUFRLENBQUMsQ0FBQztRQUN2QyxjQUFTLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ3RCLFdBQU0sR0FBRyxNQUFNLEVBQVEsQ0FBQztRQUVmLG1CQUFjLEdBQW9CO1lBQ3pDLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFO1NBQ3ZDLENBQUM7UUFFTyxZQUFPLEdBQUc7WUFDakIsRUFBRSxLQUFLLEVBQUUsd0JBQXdCLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRTtZQUN2RCxFQUFFLEtBQUssRUFBRSwwQkFBMEIsRUFBRSxLQUFLLEVBQUUsY0FBYyxFQUFFO1NBQzdELENBQUM7S0FXSDtJQVRDLFFBQVEsQ0FBQyxFQUFVO1FBQ2pCLE1BQU0sT0FBTyxHQUFnQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQztRQUNyRSxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUMxQixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQW9CO1FBQzVCLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxPQUFPO1lBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNoRCxDQUFDOytHQXZCVSx3QkFBd0I7bUdBQXhCLHdCQUF3QixvakJDakJyQywwaENBeUJBLDRpQ0RaWSxXQUFXLDhtQkFBRSxrQkFBa0IsNlNBQUUsZUFBZSxtR0FBRSxZQUFZLHNLQUFFLGFBQWE7OzRGQUk1RSx3QkFBd0I7a0JBUHBDLFNBQVM7K0JBQ0UsdUJBQXVCLGNBQ3JCLElBQUksV0FDUCxDQUFDLFdBQVcsRUFBRSxrQkFBa0IsRUFBRSxlQUFlLEVBQUUsWUFBWSxFQUFFLGFBQWEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQsIG91dHB1dCwgbW9kZWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgU2VsZWN0QnV0dG9uTW9kdWxlIH0gZnJvbSAncHJpbWVuZy9zZWxlY3RidXR0b24nO1xuaW1wb3J0IHsgSW5wdXRUZXh0TW9kdWxlIH0gZnJvbSAncHJpbWVuZy9pbnB1dHRleHQnO1xuaW1wb3J0IHsgQnV0dG9uTW9kdWxlIH0gZnJvbSAncHJpbWVuZy9idXR0b24nO1xuaW1wb3J0IHsgVG9vbHRpcE1vZHVsZSB9IGZyb20gJ3ByaW1lbmcvdG9vbHRpcCc7XG5pbXBvcnQgeyBQcm9kdWN0VHlwZSB9IGZyb20gJy4uLy4uL21vZGVscy9ib29raW5nLnR5cGVzJztcblxuaW50ZXJmYWNlIFByb2R1Y3RPcHRpb24geyBsYWJlbDogc3RyaW5nOyB2YWx1ZTogUHJvZHVjdFR5cGU7IGRpc2FibGVkPzogYm9vbGVhbjsgfVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtc2JkLWJvb2tpbmctaW5wdXQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbRm9ybXNNb2R1bGUsIFNlbGVjdEJ1dHRvbk1vZHVsZSwgSW5wdXRUZXh0TW9kdWxlLCBCdXR0b25Nb2R1bGUsIFRvb2x0aXBNb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vYm9va2luZy1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9ib29raW5nLWlucHV0LmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgU2JkQm9va2luZ0lucHV0Q29tcG9uZW50IHtcbiAgbG9hZGluZyA9IGlucHV0KGZhbHNlKTtcbiAgcHJvZHVjdCA9IG1vZGVsPFByb2R1Y3RUeXBlPignZmxpZ2h0Jyk7XG4gIGJvb2tpbmdJZCA9IG1vZGVsKCcnKTtcbiAgbG9va3VwID0gb3V0cHV0PHZvaWQ+KCk7XG5cbiAgcmVhZG9ubHkgcHJvZHVjdE9wdGlvbnM6IFByb2R1Y3RPcHRpb25bXSA9IFtcbiAgICB7IGxhYmVsOiAn4pyIIEZsaWdodCcsIHZhbHVlOiAnZmxpZ2h0JyB9LFxuICBdO1xuXG4gIHJlYWRvbmx5IGRlbW9JZHMgPSBbXG4gICAgeyBsYWJlbDogJ0RlbW8gRmxpZ2h0OiBBTE0tMjA0ODEnLCB2YWx1ZTogJ0FMTS0yMDQ4MScgfSxcbiAgICB7IGxhYmVsOiAnRGVtbyBIb3RlbDogQUxNLUhUTC05OTIxJywgdmFsdWU6ICdBTE0tSFRMLTk5MjEnIH0sXG4gIF07XG5cbiAgZmlsbERlbW8oaWQ6IHN0cmluZyk6IHZvaWQge1xuICAgIGNvbnN0IHByb2R1Y3Q6IFByb2R1Y3RUeXBlID0gaWQuaW5jbHVkZXMoJ0hUTCcpID8gJ2hvdGVsJyA6ICdmbGlnaHQnO1xuICAgIHRoaXMucHJvZHVjdC5zZXQocHJvZHVjdCk7XG4gICAgdGhpcy5ib29raW5nSWQuc2V0KGlkKTtcbiAgfVxuXG4gIG9uS2V5ZG93bihldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHRoaXMubG9va3VwLmVtaXQoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNiZC1ib29raW5nLWlucHV0XCI+XG4gIDxwLXNlbGVjdEJ1dHRvblxuICAgIFsobmdNb2RlbCldPVwicHJvZHVjdFwiXG4gICAgW29wdGlvbnNdPVwicHJvZHVjdE9wdGlvbnNcIlxuICAgIG9wdGlvbkxhYmVsPVwibGFiZWxcIlxuICAgIG9wdGlvblZhbHVlPVwidmFsdWVcIlxuICAgIG9wdGlvbkRpc2FibGVkPVwiZGlzYWJsZWRcIj5cbiAgICA8bmctdGVtcGxhdGUgcFRlbXBsYXRlPVwiaXRlbVwiIGxldC1pdGVtPlxuICAgICAgPHNwYW5cbiAgICAgICAgW3BUb29sdGlwXT1cIml0ZW0uZGlzYWJsZWQgPyAnQ29taW5nIHNvb24nIDogbnVsbFwiXG4gICAgICAgIHRvb2x0aXBQb3NpdGlvbj1cImJvdHRvbVwiXG4gICAgICAgIHN0eWxlPVwicG9pbnRlci1ldmVudHM6IGF1dG87IGRpc3BsYXk6IGlubGluZS1ibG9jaztcIj5cbiAgICAgICAge3sgaXRlbS5sYWJlbCB9fVxuICAgICAgPC9zcGFuPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIDwvcC1zZWxlY3RCdXR0b24+XG4gIDxkaXYgY2xhc3M9XCJzYmQtYm9va2luZy1pbnB1dF9fcm93XCI+XG4gICAgPGRpdiBjbGFzcz1cInNiZC1ib29raW5nLWlucHV0X19maWVsZC13cmFwXCI+XG4gICAgICA8aSBjbGFzcz1cInBpIHBpLXNlYXJjaCBzYmQtYm9va2luZy1pbnB1dF9faWNvblwiPjwvaT5cbiAgICAgIDxpbnB1dCBwSW5wdXRUZXh0IGNsYXNzPVwic2JkLWJvb2tpbmctaW5wdXRfX2ZpZWxkXCIgcGxhY2Vob2xkZXI9XCJFbnRlciBCb29raW5nIElEXCJcbiAgICAgICAgWyhuZ01vZGVsKV09XCJib29raW5nSWRcIiAoa2V5ZG93bik9XCJvbktleWRvd24oJGV2ZW50KVwiIGF1dG9jb21wbGV0ZT1cIm9mZlwiIHNwZWxsY2hlY2s9XCJmYWxzZVwiIC8+XG4gICAgPC9kaXY+XG4gICAgPGJ1dHRvbiBwQnV0dG9uIGxhYmVsPVwiTG9va3VwIOKGklwiIFtkaXNhYmxlZF09XCIhYm9va2luZ0lkKCkudHJpbSgpXCIgKGNsaWNrKT1cImxvb2t1cC5lbWl0KClcIiBjbGFzcz1cInNiZC1ib29raW5nLWlucHV0X19idG5cIj48L2J1dHRvbj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==