@pepperi-addons/ngx-lib 0.2.60 → 0.2.61-query-builder.1

package/rich-html-textarea/rich-html-textarea.component.theme.scss

@@ -1,237 +1,241 @@
-@mixin pep-rich-html-textarea-component-theme($pepperi-theme) {
-    .mat-form-field {
-        // Disabled - remove the default disabled
-        &.mat-form-field-disabled .mat-form-field-flex {
-            color: get-pep-color($pepperi-theme, color-text, color-main);
-        }
-    }
-    
-    $add-width-for-hide-scroll: 1rem;
-
-    .right-alignment {
-        quill-editor {
-            &.inline-quill {
-                .ql-container {
-                    .ql-editor {
-                        padding-right: unset;
-                        padding-left: calc(#{$spacing-sm} + #{$add-width-for-hide-scroll});
-                    }
-                }
-            }
-        }    
-    }
-
-    quill-editor {
-        &.inline-quill {
-            .ql-container {
-                .ql-editor {
-                    width: calc(100% + #{$add-width-for-hide-scroll});
-                    padding-right: calc(#{$spacing-sm} + #{$add-width-for-hide-scroll});
-                }
-            }
-        }
-
-        .ql-toolbar {
-            display: flex;
-            padding: 0px !important;
-            // height: 3rem;
-            // border-top: unset;
-            // border-right: unset;
-            // border-left: unset;
-            border: unset;
-            
-            .ql-transparent {
-                opacity: 0.9;
-            }
-            
-            .ql-formats {
-                margin-right: 0 !important;
-                margin-bottom: 0.5rem;
-
-                button { 
-                    height: 2.5rem;
-
-                    svg {
-                        width: 1.25rem !important;  
-                        float: unset !important;
-                    }
-
-                    &.ql-active {
-                        @include state-weak-active($pepperi-theme, color-weak);
-                    }
-
-                    &:focus {
-                        @include state-weak-active($pepperi-theme, color-weak);
-                    }
-                    &:active {
-                        @include state-weak-active($pepperi-theme, color-weak);
-                    }
-                }
-                
-                .ql-stroke {
-                    stroke: get-pep-color($pepperi-theme, color-weak, color-tran-80);
-                }
-                .ql-fill {
-                    fill: get-pep-color($pepperi-theme, color-weak, color-tran-80);
-                }
-
-                .ql-picker:not(.ql-color-picker) {
-                    .ql-picker-options {
-                        .ql-picker-item {
-                            outline: unset !important;
-                            width: 100%;
-                            height: auto;
-                            padding: $spacing-xs $spacing-sm;
-                            display: grid;
-                            // background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-                
-                            &:hover {
-                                @include state-weak-hover($pepperi-theme);
-                            }
-                            &:active {
-                                @include state-weak-active($pepperi-theme, color-weak, false);
-                                background: get-pep-color($pepperi-theme, color-weak, color-tran-50) !important;
-                            }
-                            &:disabled {
-                                @include state-weak-disable($pepperi-theme);
-                            }
-                        }
-                    }
-                }
-                
-                .ql-picker {
-                    &.ql-color-picker,
-                    &.ql-icon-picker {
-                        width: unset;
-                    }
-
-                    .ql-picker-label {
-                        // display: flex;
-                        // justify-content: center;
-                        outline: none;
-                        display: grid;
-                        grid-auto-flow: column;
-                        align-items: center;
-                        line-height: 1rem;
-                        border: unset;
-
-                        svg {
-                            width: 1.5rem;
-                        }
-
-                        &:after {
-                            @include select-arrow();
-                            cursor: pointer;
-                            display: grid;
-                            height: inherit;
-                            justify-content: center;
-                            align-content: center;
-                        }
-
-                    }
-
-                    &.select-arrow {
-                        .ql-picker-label {
-                            &::before {
-                                line-height: unset;
-                            }
-
-                            svg {
-                                display: none;
-                            }
-                        }
-                    }
-
-                    .ql-picker-options {
-                        border-radius: $border-radius-md;
-                        box-sizing: content-box;
-                        padding: unset;
-                        box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
-                        border: 1px solid get-pep-color($pepperi-theme, color-system-primary, color-base);
-                    }
-                
-                    &.ql-color-picker {
-                        .ql-picker-options {
-                            padding: $spacing-xs $spacing-sm;
-                            width: 140px;
-
-                            &:focus {
-                                outline: unset !important;
-                            }
-
-                            .ql-picker-item {
-                                &:focus {
-                                    outline: unset !important;
-                                }
-                            }
-                        }
-                    }
-
-                    &.ql-expanded {
-                        @include state-weak-active($pepperi-theme, color-weak);
-                        
-                        .ql-picker-label {
-                            .ql-stroke {
-                                stroke: get-pep-color($pepperi-theme, color-text, color-link);
-                            }
-                            .ql-fill {
-                                fill: get-pep-color($pepperi-theme, color-text, color-link);
-                            }
-                        }
-
-                        .ql-picker-label {
-                            border: unset;
-                        }
-                    }
-
-                }
-            }
-
-            .vertical-separator {
-                border-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-50);
-            }
-
-            @media (max-width: 568px) { // Hack - only for iphone5 - don't put inside medium size cause of bigger iphone devices - avner
-                .ql-list{
-                    display:none;
-                }
-            }
-            @media (max-width: $screen-max-size-xs) {
-                .ql-italic,
-                .ql-underline {
-                    display: none;
-                }
-            }
-            @media (max-width: $screen-max-size-2xs) {
-                .ql-italic,
-                .ql-image,
-                .ql-underline,
-                .ql-list,
-                // .ql-link,
-                .ql-header {
-                    display: none;
-                }
-            }
-        }
-
-        .ql-container {
-            height: 16rem;
-            border: unset;
-            @include pep-border(border-top, $pepperi-theme, solid, true);
-
-            .ql-editor {
-                $side-padding: 0; // $spacing-sm;
-                padding: $spacing-sm $side-padding;
-
-                &.ql-blank::before {
-                    right: $side-padding;
-                    left: $side-padding;
-                }
-            }
-
-            .ql-tooltip.ql-flip {
-                left: 0 !important;
-            }
-        }
-    }
-}
+@use '../src/core/style/abstracts/variables';
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
+
+// @mixin pep-rich-html-textarea-component-theme() {
+.mat-form-field {
+    // Disabled - remove the default disabled
+    &.mat-form-field-disabled .mat-form-field-flex {
+        color: functions.get-pep-color(color-text, color-main);
+    }
+}
+
+$add-width-for-hide-scroll: 1rem;
+
+.right-alignment {
+    quill-editor {
+        &.inline-quill {
+            .ql-container {
+                .ql-editor {
+                    padding-right: unset;
+                    padding-left: calc(#{variables.$spacing-sm} + #{$add-width-for-hide-scroll});
+                }
+            }
+        }
+    }    
+}
+
+quill-editor {
+    &.inline-quill {
+        .ql-container {
+            .ql-editor {
+                width: calc(100% + #{$add-width-for-hide-scroll});
+                padding-right: calc(#{variables.$spacing-sm} + #{$add-width-for-hide-scroll});
+            }
+        }
+    }
+
+    .ql-toolbar {
+        display: flex;
+        padding: 0px !important;
+        // height: 3rem;
+        // border-top: unset;
+        // border-right: unset;
+        // border-left: unset;
+        border: unset;
+        
+        .ql-transparent {
+            opacity: 0.9;
+        }
+        
+        .ql-formats {
+            margin-right: 0 !important;
+            margin-bottom: 0.5rem;
+
+            button { 
+                height: 2.5rem;
+
+                svg {
+                    width: 1.25rem !important;  
+                    float: unset !important;
+                }
+
+                &.ql-active {
+                    @include mixins.state-weak-active(color-weak);
+                }
+
+                &:focus {
+                    @include mixins.state-weak-active(color-weak);
+                }
+                &:active {
+                    @include mixins.state-weak-active(color-weak);
+                }
+            }
+            
+            .ql-stroke {
+                stroke: functions.get-pep-color(color-weak, color-tran-80);
+            }
+            .ql-fill {
+                fill: functions.get-pep-color(color-weak, color-tran-80);
+            }
+
+            .ql-picker:not(.ql-color-picker) {
+                .ql-picker-options {
+                    .ql-picker-item {
+                        outline: unset !important;
+                        width: 100%;
+                        height: auto;
+                        padding: variables.$spacing-xs variables.$spacing-sm;
+                        display: grid;
+                        // background: functions.get-pep-color(color-system-primary-invert, color-base);
+            
+                        &:hover {
+                            @include mixins.state-weak-hover();
+                        }
+                        &:active {
+                            @include mixins.state-weak-active(color-weak, false);
+                            background: functions.get-pep-color(color-weak, color-tran-50) !important;
+                        }
+                        &:disabled {
+                            @include mixins.state-weak-disable();
+                        }
+                    }
+                }
+            }
+            
+            .ql-picker {
+                &.ql-color-picker,
+                &.ql-icon-picker {
+                    width: unset;
+                }
+
+                .ql-picker-label {
+                    // display: flex;
+                    // justify-content: center;
+                    outline: none;
+                    display: grid;
+                    grid-auto-flow: column;
+                    align-items: center;
+                    line-height: 1rem;
+                    border: unset;
+
+                    svg {
+                        width: 1.5rem;
+                    }
+
+                    &:after {
+                        @include mixins.select-arrow();
+                        cursor: pointer;
+                        display: grid;
+                        height: inherit;
+                        justify-content: center;
+                        align-content: center;
+                    }
+
+                }
+
+                &.select-arrow {
+                    .ql-picker-label {
+                        &::before {
+                            line-height: unset;
+                        }
+
+                        svg {
+                            display: none;
+                        }
+                    }
+                }
+
+                .ql-picker-options {
+                    border-radius: variables.$border-radius-md;
+                    box-sizing: content-box;
+                    padding: unset;
+                    box-shadow: functions.get-pep-shadow(shadow-sm, hard);
+                    border: 1px solid functions.get-pep-color(color-system-primary, color-base);
+                }
+            
+                &.ql-color-picker {
+                    .ql-picker-options {
+                        padding: variables.$spacing-xs variables.$spacing-sm;
+                        width: 140px;
+
+                        &:focus {
+                            outline: unset !important;
+                        }
+
+                        .ql-picker-item {
+                            &:focus {
+                                outline: unset !important;
+                            }
+                        }
+                    }
+                }
+
+                &.ql-expanded {
+                    @include mixins.state-weak-active(color-weak);
+                    
+                    .ql-picker-label {
+                        .ql-stroke {
+                            stroke: functions.get-pep-color(color-text, color-link);
+                        }
+                        .ql-fill {
+                            fill: functions.get-pep-color(color-text, color-link);
+                        }
+                    }
+
+                    .ql-picker-label {
+                        border: unset;
+                    }
+                }
+
+            }
+        }
+
+        .vertical-separator {
+            border-color: functions.get-pep-color(color-system-primary, color-tran-50);
+        }
+
+        @media (max-width: 568px) { // Hack - only for iphone5 - don't put inside medium size cause of bigger iphone devices - avner
+            .ql-list{
+                display:none;
+            }
+        }
+        @media (max-width: variables.$screen-max-size-xs) {
+            .ql-italic,
+            .ql-underline {
+                display: none;
+            }
+        }
+        @media (max-width: variables.$screen-max-size-2xs) {
+            .ql-italic,
+            .ql-image,
+            .ql-underline,
+            .ql-list,
+            // .ql-link,
+            .ql-header {
+                display: none;
+            }
+        }
+    }
+
+    .ql-container {
+        height: 16rem;
+        border: unset;
+        @include mixins.pep-border(border-top, solid, true);
+
+        .ql-editor {
+            $side-padding: 0; // $spacing-sm;
+            padding: variables.$spacing-sm $side-padding;
+
+            &.ql-blank::before {
+                right: $side-padding;
+                left: $side-padding;
+            }
+        }
+
+        .ql-tooltip.ql-flip {
+            left: 0 !important;
+        }
+    }
+}
+// }

package/search/pepperi-addons-ngx-lib-search.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepSearchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":21,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":30,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":32,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":34,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSearchComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSearchComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":40,"character":41}]}]}},"PepSearchType":{"__symbolic":"interface"},"PepSearchTriggerType":{"__symbolic":"interface"},"PepSearchStateType":{"__symbolic":"interface"},"IPepSearchClickEvent":{"__symbolic":"interface"},"IPepSearchAutocompleteChangeEvent":{"__symbolic":"interface"},"IPepSearchStateChangeEvent":{"__symbolic":"interface"},"PepSearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"pep-search","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":39,"character":8},"arguments":["slideInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":40,"character":12},"arguments":["close",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":42,"character":16},"arguments":[{"width":"0","padding":"0","border":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":48,"character":12},"arguments":["open",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":50,"character":16},"arguments":[{"width":"inherit"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":54,"character":12},"arguments":["close => open",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":54,"character":40},"arguments":["500ms ease-in-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":55,"character":12},"arguments":["open => close",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":55,"character":40},"arguments":["500ms ease-in-out"]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":57,"character":8},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":58,"character":12},"arguments":["fadeOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":60,"character":16},"arguments":[{"opacity":0,"width":"1px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":65,"character":12},"arguments":["fadeIn",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":67,"character":16},"arguments":[{"opacity":1,"width":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":72,"character":12},"arguments":["fadeOut => fadeIn",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":74,"character":16},"arguments":[300,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":74,"character":29},"arguments":[{"opacity":1,"width":"100%"}]}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":76,"character":12},"arguments":["fadeIn => fadeOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":78,"character":16},"arguments":[350,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":78,"character":29},"arguments":[{"opacity":0,"width":"1px"}]}]}]}]]}],"template":"<!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n</ng-container> -->\n<ng-container *ngIf=\"shrinkInSmallScreen; then shrinkBlock; else staticBlock\"></ng-container>\n<ng-template #shrinkBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\" [ngClass]=\"{ 'pep-floating-search': isFloating}\"\n        [@fadeInOut]=\"fadeState\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <button *ngIf=\"isFloating && fadeState !='fadeIn' && showFloatSrcBtn\"\n        class=\"pep-button icon-button {{ sizeType }} weak\" mat-button (click)=\"animateSearch()\">\n        <mat-icon>\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n<ng-template #staticBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #autoCompleteBlock>\n    <mat-form-field appearance=\"outline\">\n        <!-- (@slideInOut.done)=\"animateSearchDone()\" [@slideInOut]=\"state\" -->\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\" results=\"5\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" [matAutocomplete]=\"auto\" />\n        <mat-autocomplete #auto=\"matAutocomplete\" class=\"pep-select\">\n            <mat-option *ngFor=\"let value of autoCompleteValues\" [value]=\"value\" (click)=\"triggerSearch()\">\n                {{value}}\n            </mat-option>\n            <mat-option *ngIf=\"autoCompleteValues?.length > autoCompleteTop - 1\" [value]=\"value\"\n                (click)=\"triggerSearch()\">{{ 'SEARCH.MORE_RESULTS' | translate }}</mat-option>\n        </mat-autocomplete>\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n\n<ng-template #regularBlock>\n    <mat-form-field appearance=\"outline\">\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" />\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n\n<ng-template #triggerOnClickBlock>\n    <!-- <ng-container *ngIf=\"(state == 'open' && searchControl.value?.length > 0)\"> -->\n    <ng-container *ngIf=\"(state == 'open')\">\n        <mat-icon class=\"pep-text-icon pep-pointer\" (click)=\"onClearClicked($event)\">\n            <pep-icon name=\"system_close\"></pep-icon>\n        </mat-icon>\n        <span class=\"pep-text-icon pep-spacing-element pep-v-separator\">|</span>\n    </ng-container>\n    <mat-icon class=\"pep-text-icon pep-pointer\" (click)=\"onSearchClicked()\">\n        <pep-icon name=\"system_search\"></pep-icon>\n    </mat-icon>\n</ng-template>\n\n<ng-template #triggerOnKeydownBlock>\n    <ng-container *ngIf=\"searchControl.value?.length > 0; then clearBlock; else searchBlock\"></ng-container>\n    <ng-template #clearBlock>\n        <button class=\"pep-button regular {{ sizeType }}\" mat-button (click)=\"onClearClicked($event)\">\n            <mat-icon>\n                <pep-icon name=\"system_close\"></pep-icon>\n            </mat-icon>\n        </button>\n    </ng-template>\n    <ng-template #searchBlock>\n        <mat-icon class=\"pep-text-icon\">\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </ng-template>\n</ng-template>","styles":[".pep-search-container .pep-search-input .mat-form-field{display:inherit}.pep-search-container .pep-search-input .pep-v-separator{padding:.25rem 0;padding:var(--pep-spacing-xs,.25rem) 0;height:100%}.pep-search-container .pep-search-input .pep-text-icon.pep-pointer{cursor:pointer}.pep-search-container.pep-floating-search{display:inline-flex}.pep-search-container.pep-floating-search.pep-is-action-button-visable{width:calc(100% - (.5rem * 2 + 1.5rem));width:calc(100% - (var(--pep-spacing-sm, .5rem) * 2 + var(--pep-spacing-xl, 1.5rem)))}@media (max-width:599px){.pep-search-container ::ng-deep .mat-button-wrapper{max-width:3.125rem}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":83,"character":1}}],"members":{"triggerOn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"autoCompleteTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"autoCompleteValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"shrinkInSmallScreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"searchControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"sizeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":136,"character":5}}]}],"autocompleteChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":140,"character":5}}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":143,"character":5},"arguments":["searchInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":156,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":157,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"createSearchControlIfNotExist":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}],"showFloatingButton":[{"__symbolic":"method"}],"initSearch":[{"__symbolic":"method"}],"onClearClicked":[{"__symbolic":"method"}],"onSearchClicked":[{"__symbolic":"method"}],"onSearch":[{"__symbolic":"method"}],"triggerSearch":[{"__symbolic":"method"}],"animateSearch":[{"__symbolic":"method"}],"animateSearchDone":[{"__symbolic":"method"}],"emitSearchClick":[{"__symbolic":"method"}]}}},"origins":{"PepSearchModule":"./search.module","PepSearchType":"./search.model","PepSearchTriggerType":"./search.model","PepSearchStateType":"./search.model","IPepSearchClickEvent":"./search.model","IPepSearchAutocompleteChangeEvent":"./search.model","IPepSearchStateChangeEvent":"./search.model","PepSearchComponent":"./search.component"},"importAs":"@pepperi-addons/ngx-lib/search"}
+{"__symbolic":"module","version":4,"metadata":{"PepSearchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":21,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":30,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":32,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":34,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSearchComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSearchComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":40,"character":41}]}]}},"PepSearchType":{"__symbolic":"interface"},"PepSearchTriggerType":{"__symbolic":"interface"},"PepSearchStateType":{"__symbolic":"interface"},"IPepSearchClickEvent":{"__symbolic":"interface"},"IPepSearchAutocompleteChangeEvent":{"__symbolic":"interface"},"IPepSearchStateChangeEvent":{"__symbolic":"interface"},"PepSearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"pep-search","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":39,"character":8},"arguments":["slideInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":40,"character":12},"arguments":["close",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":42,"character":16},"arguments":[{"width":"0","padding":"0","border":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":48,"character":12},"arguments":["open",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":50,"character":16},"arguments":[{"width":"inherit"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":54,"character":12},"arguments":["close => open",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":54,"character":40},"arguments":["500ms ease-in-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":55,"character":12},"arguments":["open => close",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":55,"character":40},"arguments":["500ms ease-in-out"]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":57,"character":8},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":58,"character":12},"arguments":["fadeOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":60,"character":16},"arguments":[{"opacity":0,"width":"1px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":65,"character":12},"arguments":["fadeIn",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":67,"character":16},"arguments":[{"opacity":1,"width":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":72,"character":12},"arguments":["fadeOut => fadeIn",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":74,"character":16},"arguments":[300,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":74,"character":29},"arguments":[{"opacity":1,"width":"100%"}]}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":76,"character":12},"arguments":["fadeIn => fadeOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":78,"character":16},"arguments":[350,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":78,"character":29},"arguments":[{"opacity":0,"width":"1px"}]}]}]}]]}],"template":"<!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\r\n</ng-container> -->\r\n<ng-container *ngIf=\"shrinkInSmallScreen; then shrinkBlock; else staticBlock\"></ng-container>\r\n<ng-template #shrinkBlock>\r\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\" [ngClass]=\"{ 'pep-floating-search': isFloating}\"\r\n        [@fadeInOut]=\"fadeState\">\r\n        <div class=\"pep-search-input\">\r\n            <ng-container *ngIf=\"type === 'auto-complete'\">\r\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"type === 'regular'\">\r\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <button *ngIf=\"isFloating && fadeState !='fadeIn' && showFloatSrcBtn\"\r\n        class=\"pep-button icon-button {{ sizeType }} weak\" mat-button (click)=\"animateSearch()\">\r\n        <mat-icon>\r\n            <pep-icon name=\"system_search\"></pep-icon>\r\n        </mat-icon>\r\n    </button>\r\n</ng-template>\r\n<ng-template #staticBlock>\r\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\">\r\n        <div class=\"pep-search-input\">\r\n            <ng-container *ngIf=\"type === 'auto-complete'\">\r\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"type === 'regular'\">\r\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #autoCompleteBlock>\r\n    <mat-form-field appearance=\"outline\">\r\n        <!-- (@slideInOut.done)=\"animateSearchDone()\" [@slideInOut]=\"state\" -->\r\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\r\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\" results=\"5\"\r\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" [matAutocomplete]=\"auto\" />\r\n        <mat-autocomplete #auto=\"matAutocomplete\" class=\"pep-select\">\r\n            <mat-option *ngFor=\"let value of autoCompleteValues\" [value]=\"value\" (click)=\"triggerSearch()\">\r\n                {{value}}\r\n            </mat-option>\r\n            <mat-option *ngIf=\"autoCompleteValues?.length > autoCompleteTop - 1\" [value]=\"value\"\r\n                (click)=\"triggerSearch()\">{{ 'SEARCH.MORE_RESULTS' | translate }}</mat-option>\r\n        </mat-autocomplete>\r\n        <div matSuffix class=\"flex align-center\">\r\n            <ng-container *ngIf=\"triggerOn === 'click'\">\r\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\r\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </mat-form-field>\r\n</ng-template>\r\n\r\n<ng-template #regularBlock>\r\n    <mat-form-field appearance=\"outline\">\r\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\r\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\"\r\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" />\r\n        <div matSuffix class=\"flex align-center\">\r\n            <ng-container *ngIf=\"triggerOn === 'click'\">\r\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\r\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </mat-form-field>\r\n</ng-template>\r\n\r\n<ng-template #triggerOnClickBlock>\r\n    <!-- <ng-container *ngIf=\"(state == 'open' && searchControl.value?.length > 0)\"> -->\r\n    <ng-container *ngIf=\"(state == 'open')\">\r\n        <mat-icon class=\"pep-text-icon pep-pointer\" (click)=\"onClearClicked($event)\">\r\n            <pep-icon name=\"system_close\"></pep-icon>\r\n        </mat-icon>\r\n        <span class=\"pep-text-icon pep-spacing-element pep-v-separator\">|</span>\r\n    </ng-container>\r\n    <mat-icon class=\"pep-text-icon pep-pointer\" (click)=\"onSearchClicked()\">\r\n        <pep-icon name=\"system_search\"></pep-icon>\r\n    </mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #triggerOnKeydownBlock>\r\n    <ng-container *ngIf=\"searchControl.value?.length > 0; then clearBlock; else searchBlock\"></ng-container>\r\n    <ng-template #clearBlock>\r\n        <button class=\"pep-button regular {{ sizeType }}\" mat-button (click)=\"onClearClicked($event)\">\r\n            <mat-icon>\r\n                <pep-icon name=\"system_close\"></pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n    </ng-template>\r\n    <ng-template #searchBlock>\r\n        <mat-icon class=\"pep-text-icon\">\r\n            <pep-icon name=\"system_search\"></pep-icon>\r\n        </mat-icon>\r\n    </ng-template>\r\n</ng-template>","styles":[".pep-search-container .pep-search-input .mat-form-field{display:inherit}.pep-search-container .pep-search-input .pep-v-separator{padding:.25rem 0;padding:var(--pep-spacing-xs,.25rem) 0;height:100%}.pep-search-container .pep-search-input .pep-text-icon.pep-pointer{cursor:pointer}.pep-search-container.pep-floating-search{display:inline-flex}.pep-search-container.pep-floating-search.pep-is-action-button-visable{width:calc(100% - (.5rem * 2 + 1.5rem));width:calc(100% - (var(--pep-spacing-sm, .5rem) * 2 + var(--pep-spacing-xl, 1.5rem)))}@media (max-width:599px){.pep-search-container ::ng-deep .mat-button-wrapper{max-width:3.125rem}}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":83,"character":1}}],"members":{"triggerOn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"autoCompleteTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"autoCompleteValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"shrinkInSmallScreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"searchControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"sizeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":136,"character":5}}]}],"autocompleteChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":140,"character":5}}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":143,"character":5},"arguments":["searchInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":156,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":157,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"createSearchControlIfNotExist":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}],"showFloatingButton":[{"__symbolic":"method"}],"initSearch":[{"__symbolic":"method"}],"onClearClicked":[{"__symbolic":"method"}],"onSearchClicked":[{"__symbolic":"method"}],"onSearch":[{"__symbolic":"method"}],"triggerSearch":[{"__symbolic":"method"}],"animateSearch":[{"__symbolic":"method"}],"animateSearchDone":[{"__symbolic":"method"}],"emitSearchClick":[{"__symbolic":"method"}]}}},"origins":{"PepSearchModule":"./search.module","PepSearchType":"./search.model","PepSearchTriggerType":"./search.model","PepSearchStateType":"./search.model","IPepSearchClickEvent":"./search.model","IPepSearchAutocompleteChangeEvent":"./search.model","IPepSearchStateChangeEvent":"./search.model","PepSearchComponent":"./search.component"},"importAs":"@pepperi-addons/ngx-lib/search"}