@crowdfarming/oliva-ds 1.14.0 → 1.15.0-rc.2

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -4718,9 +4718,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }] } });
 
+class ModalComponent {
+    isOpen = input(false);
+    size = input('md');
+    title = input();
+    description = input();
+    showCloseButton = input(true);
+    primaryButton = input({
+        text: 'Primary',
+        variant: 'primary',
+    });
+    secondaryButton = input({
+        text: 'Secondary',
+        variant: 'secondary',
+    });
+    closed = output();
+    primaryButtonClicked = output();
+    secondaryButtonClicked = output();
+    // Internal state
+    isVisible = signal(false);
+    constructor() {
+        // Watch for isOpen changes to trigger animations
+        effect(() => {
+            if (this.isOpen()) {
+                this.open();
+            }
+            else {
+                this.isVisible.set(false);
+            }
+        });
+    }
+    // Computed properties
+    classes = computed(() => {
+        const c = [
+            'c-modal',
+            `c-modal--${this.size()}`,
+            this.isOpen() ? 'c-modal--open' : '',
+            this.isVisible() ? 'c-modal--visible' : '',
+        ];
+        return c.filter(Boolean).join(' ');
+    });
+    backdropClasses = computed(() => {
+        const c = [
+            'c-modal__backdrop',
+            this.isOpen() ? 'c-modal__backdrop--open' : '',
+            this.isVisible() ? 'c-modal__backdrop--visible' : '',
+        ];
+        return c.filter(Boolean).join(' ');
+    });
+    contentClasses = computed(() => {
+        const c = [
+            'c-modal__content',
+            `c-modal__content--${this.size()}`,
+            this.isOpen() ? 'c-modal__content--open' : '',
+            this.isVisible() ? 'c-modal__content--visible' : '',
+        ];
+        return c.filter(Boolean).join(' ');
+    });
+    // Methods
+    open() {
+        this.isVisible.set(true);
+    }
+    close() {
+        this.isVisible.set(false);
+        // Wait for animation to complete before emitting
+        setTimeout(() => {
+            this.closed.emit();
+        }, 200);
+    }
+    onBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.close();
+        }
+    }
+    onPrimaryButtonClick() {
+        this.primaryButtonClicked.emit();
+    }
+    onSecondaryButtonClick() {
+        this.secondaryButtonClicked.emit();
+    }
+    onCloseButtonClick() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, primaryButton: { classPropertyName: "primaryButton", publicName: "primaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButton: { classPropertyName: "secondaryButton", publicName: "secondaryButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked" }, ngImport: i0, template: "@if (isOpen()) {\n<div class=\"c-modal\" [ngClass]=\"classes()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"backdropClasses()\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown.escape)=\"close()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"contentClasses()\"\n    (keydown.escape)=\"close()\"\n    tabindex=\"0\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"title() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"description() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (title() || showCloseButton()) {\n    <div class=\"c-modal__header\">\n      @if (title()) {\n      <h2 id=\"modal-title\" class=\"c-modal__title\">{{ title() }}</h2>\n      } @if (showCloseButton()) {\n      <lib-button-icon\n        iconName=\"x-regular\"\n        size=\"sm\"\n        variant=\"neutral\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      ></lib-button-icon>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    @if (description()) {\n    <div id=\"modal-description\" class=\"c-modal__description\">\n      <p>{{ description() }}</p>\n    </div>\n    }\n\n    <!-- Body Content -->\n    <div class=\"c-modal__body\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (primaryButton() || secondaryButton()) {\n    <div class=\"c-modal__footer\">\n      @if (secondaryButton()) {\n      <lib-button\n        [text]=\"secondaryButton()!.text\"\n        [variant]=\"secondaryButton()!.variant\"\n        [disabled]=\"secondaryButton()!.disabled ?? false\"\n        [loading]=\"secondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n        class=\"c-modal__button c-modal__button--secondary\"\n      ></lib-button>\n      } @if (primaryButton()) {\n      <lib-button\n        [text]=\"primaryButton()!.text\"\n        [variant]=\"primaryButton()!.variant\"\n        [disabled]=\"primaryButton()!.disabled ?? false\"\n        [loading]=\"primaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n        class=\"c-modal__button c-modal__button--primary\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--base-modal);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal__content{width:100%}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal--open,.c-modal--visible{opacity:1;visibility:visible}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out}.c-modal--sm.c-modal--visible .c-modal__content,.c-modal--md.c-modal--visible .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--visible .c-modal__content{transform:scale(1)}}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open,.c-modal__backdrop--visible{opacity:1}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column}.c-modal__content--open,.c-modal__content--visible{transform:scale(1)}.c-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-container-padding-sm);border-bottom:1px solid var(--color-core-border-soft);gap:var(--space-container-gap-sm)}.c-modal__title{margin:0;font-family:var(--typography-label-lg-default-family),sans-serif;font-weight:var(--typography-label-lg-default-weight);font-size:var(--typography-label-lg-default-size);line-height:var(--typography-label-lg-default-line-height);color:var(--color-core-content-default);flex:1}.c-modal__close-button{background:none;border:none;cursor:pointer;padding:var(--space-component-padding-xs);border-radius:var(--size-border-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--color-core-content-soft);transition:all .2s ease-in-out}.c-modal__close-button:hover{background-color:var(--color-core-background-neutral-soft);color:var(--color-core-content-default)}.c-modal__close-button:focus-visible{outline:2px solid var(--color-core-border-default);outline-offset:2px}.c-modal__description{padding:var(--space-component-padding-lg);border-bottom:1px solid var(--color-core-border-soft)}.c-modal__description p{margin:0;font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);color:var(--color-core-content-soft)}@media (max-width: 768px){.c-modal__description{padding:var(--space-component-padding-md)}}.c-modal__body{flex:1;padding:var(--space-component-padding-lg);overflow-y:auto}@media (max-width: 768px){.c-modal__body{padding:var(--space-component-padding-md)}}.c-modal__footer{display:flex;gap:var(--space-component-gap-md);padding:var(--space-component-padding-lg);border-top:1px solid var(--color-core-border-soft);background-color:var(--color-core-background-neutral-soft)}@media (max-width: 768px){.c-modal__footer{flex-direction:column;padding:var(--space-component-padding-md);gap:var(--space-component-gap-sm)}}.c-modal__button{flex:1}@media (max-width: 768px){.c-modal__button{width:100%}}.c-modal__button--primary{order:2}.c-modal__button--secondary{order:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isOpen()) {\n<div class=\"c-modal\" [ngClass]=\"classes()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"backdropClasses()\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown.escape)=\"close()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"contentClasses()\"\n    (keydown.escape)=\"close()\"\n    tabindex=\"0\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"title() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"description() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (title() || showCloseButton()) {\n    <div class=\"c-modal__header\">\n      @if (title()) {\n      <h2 id=\"modal-title\" class=\"c-modal__title\">{{ title() }}</h2>\n      } @if (showCloseButton()) {\n      <lib-button-icon\n        iconName=\"x-regular\"\n        size=\"sm\"\n        variant=\"neutral\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      ></lib-button-icon>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    @if (description()) {\n    <div id=\"modal-description\" class=\"c-modal__description\">\n      <p>{{ description() }}</p>\n    </div>\n    }\n\n    <!-- Body Content -->\n    <div class=\"c-modal__body\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (primaryButton() || secondaryButton()) {\n    <div class=\"c-modal__footer\">\n      @if (secondaryButton()) {\n      <lib-button\n        [text]=\"secondaryButton()!.text\"\n        [variant]=\"secondaryButton()!.variant\"\n        [disabled]=\"secondaryButton()!.disabled ?? false\"\n        [loading]=\"secondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n        class=\"c-modal__button c-modal__button--secondary\"\n      ></lib-button>\n      } @if (primaryButton()) {\n      <lib-button\n        [text]=\"primaryButton()!.text\"\n        [variant]=\"primaryButton()!.variant\"\n        [disabled]=\"primaryButton()!.disabled ?? false\"\n        [loading]=\"primaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n        class=\"c-modal__button c-modal__button--primary\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--base-modal);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal__content{width:100%}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal--open,.c-modal--visible{opacity:1;visibility:visible}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out}.c-modal--sm.c-modal--visible .c-modal__content,.c-modal--md.c-modal--visible .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--visible .c-modal__content{transform:scale(1)}}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open,.c-modal__backdrop--visible{opacity:1}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column}.c-modal__content--open,.c-modal__content--visible{transform:scale(1)}.c-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-container-padding-sm);border-bottom:1px solid var(--color-core-border-soft);gap:var(--space-container-gap-sm)}.c-modal__title{margin:0;font-family:var(--typography-label-lg-default-family),sans-serif;font-weight:var(--typography-label-lg-default-weight);font-size:var(--typography-label-lg-default-size);line-height:var(--typography-label-lg-default-line-height);color:var(--color-core-content-default);flex:1}.c-modal__close-button{background:none;border:none;cursor:pointer;padding:var(--space-component-padding-xs);border-radius:var(--size-border-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--color-core-content-soft);transition:all .2s ease-in-out}.c-modal__close-button:hover{background-color:var(--color-core-background-neutral-soft);color:var(--color-core-content-default)}.c-modal__close-button:focus-visible{outline:2px solid var(--color-core-border-default);outline-offset:2px}.c-modal__description{padding:var(--space-component-padding-lg);border-bottom:1px solid var(--color-core-border-soft)}.c-modal__description p{margin:0;font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);color:var(--color-core-content-soft)}@media (max-width: 768px){.c-modal__description{padding:var(--space-component-padding-md)}}.c-modal__body{flex:1;padding:var(--space-component-padding-lg);overflow-y:auto}@media (max-width: 768px){.c-modal__body{padding:var(--space-component-padding-md)}}.c-modal__footer{display:flex;gap:var(--space-component-gap-md);padding:var(--space-component-padding-lg);border-top:1px solid var(--color-core-border-soft);background-color:var(--color-core-background-neutral-soft)}@media (max-width: 768px){.c-modal__footer{flex-direction:column;padding:var(--space-component-padding-md);gap:var(--space-component-gap-sm)}}.c-modal__button{flex:1}@media (max-width: 768px){.c-modal__button{width:100%}}.c-modal__button--primary{order:2}.c-modal__button--secondary{order:1}\n"] }]
+        }], ctorParameters: () => [] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkComponent, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent };
+export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkComponent, ModalComponent, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent };
 //# sourceMappingURL=crowdfarming-oliva-ds.mjs.map