@pepperi-addons/ngx-lib 0.3.9-beta.7 → 0.3.9

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"},"PepSearchShrinkType":{"__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":35,"character":1},"arguments":[{"selector":"pep-search","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":40,"character":8},"arguments":["slideInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":41,"character":12},"arguments":["close",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":43,"character":16},"arguments":[{"width":"0","padding":"0","border":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":49,"character":12},"arguments":["open",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":51,"character":16},"arguments":[{"width":"inherit"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":55,"character":12},"arguments":["close => open",{"__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":"transition","line":56,"character":12},"arguments":["open => close",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":56,"character":40},"arguments":["500ms ease-in-out"]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":58,"character":8},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":59,"character":12},"arguments":["fadeOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":61,"character":16},"arguments":[{"opacity":0,"width":"1px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":66,"character":12},"arguments":["fadeIn",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":68,"character":16},"arguments":[{"opacity":1,"width":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":73,"character":12},"arguments":["fadeOut => fadeIn",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":75,"character":16},"arguments":[300,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":75,"character":29},"arguments":[{"opacity":1,"width":"100%"}]}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":77,"character":12},"arguments":["fadeIn => fadeOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":79,"character":16},"arguments":[350,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":79,"character":29},"arguments":[{"opacity":0,"width":"1px"}]}]}]}]]}],"template":"<!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n</ng-container> -->\n<ng-container *ngIf=\"shrink !== 'never'; 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":84,"character":1}}],"members":{"triggerOn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"autoCompleteTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"autoCompleteValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"shrink":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"searchControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"sizeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":147,"character":5}}]}],"autocompleteChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":149,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":151,"character":5}}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":154,"character":5},"arguments":["searchInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":167,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":168,"character":31}]}],"setIsFloating":[{"__symbolic":"method"}],"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","PepSearchShrinkType":"./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"},"PepSearchShrinkType":{"__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":35,"character":1},"arguments":[{"selector":"pep-search","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":40,"character":8},"arguments":["slideInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":41,"character":12},"arguments":["close",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":43,"character":16},"arguments":[{"width":"0","padding":"0","border":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":49,"character":12},"arguments":["open",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":51,"character":16},"arguments":[{"width":"inherit"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":55,"character":12},"arguments":["close => open",{"__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":"transition","line":56,"character":12},"arguments":["open => close",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":56,"character":40},"arguments":["500ms ease-in-out"]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":58,"character":8},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":59,"character":12},"arguments":["fadeOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":61,"character":16},"arguments":[{"opacity":0,"width":"1px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":66,"character":12},"arguments":["fadeIn",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":68,"character":16},"arguments":[{"opacity":1,"width":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":73,"character":12},"arguments":["fadeOut => fadeIn",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":75,"character":16},"arguments":[300,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":75,"character":29},"arguments":[{"opacity":1,"width":"100%"}]}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":77,"character":12},"arguments":["fadeIn => fadeOut",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":79,"character":16},"arguments":[350,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":79,"character":29},"arguments":[{"opacity":0,"width":"1px"}]}]}]}]]}],"template":"<!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n</ng-container> -->\n<ng-container *ngIf=\"shrink !== 'never'; 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 }}...\" (focusout)=\"onFocusout()\" />\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<ng-template #triggerOnClickBlock>\n    <mat-icon class=\"pep-text-icon pep-pointer\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\"\n        (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\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\">|</span>\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-search-input .hide-clear-icon{visibility:hidden}.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":84,"character":1}}],"members":{"triggerOn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"autoCompleteTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"autoCompleteValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"shrink":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"searchControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"sizeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":147,"character":5}}]}],"autocompleteChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":149,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":151,"character":5}}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":154,"character":5},"arguments":["searchInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":167,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":168,"character":31}]}],"setIsFloating":[{"__symbolic":"method"}],"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"}],"onFocusout":[{"__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","PepSearchShrinkType":"./search.model","IPepSearchClickEvent":"./search.model","IPepSearchAutocompleteChangeEvent":"./search.model","IPepSearchStateChangeEvent":"./search.model","PepSearchComponent":"./search.component"},"importAs":"@pepperi-addons/ngx-lib/search"}

package/search/search.component.d.ts

@@ -52,6 +52,7 @@ export declare class PepSearchComponent implements OnInit, OnDestroy {
     initSearch(): void;
     onClearClicked(event: any): void;
     onSearchClicked(): void;
+    onFocusout(): void;
     onSearch(event: Event): void;
     triggerSearch(): void;
     animateSearch(): void;

package/src/assets/i18n/en.ngx-lib.json

@@ -31,7 +31,7 @@
         "SELECT_PROFILE_DIALOG_TITLE": "Select profile",
         "SELECT_PROFILE": "Select a profile",
         "DEFAULT_PROFILE": "(Default profile)",
-        "NO_FIELDS_ARE_ASSIGN": "No fields are assigned"
+        "NO_FIELDS_ASSIGNED": "No fields were assigned"
     },
     "RICH_TEXTAREA": {
         "HINT": "Enter Text"
@@ -103,6 +103,7 @@
         "DELETE": "Delete",
         "DONE": "Done",
         "OK": "Ok",
+        "REMOVE": "Remove",
         "SAVE": "Save"
     },
     "LIST": {

package/src/core/style/abstracts/functions.scss

@@ -351,29 +351,29 @@
 
 /// Gets color from pep theme
 /// @param {Map} $pepperi-theme - the pep theme map 
-/// @param {String} $color-map - the colors map 
+/// @param {String} $color-map-key - the colors map key
 /// @param {String} $color-name - the color name
 /// @return {color} - wanted color
-// @function get-pep-color($pepperi-theme, $color-map, $color-name) {
+// @function get-pep-color($pepperi-theme, $color-map-key, $color-name) {
 //     $colors: map.get($pepperi-theme, colors);
-//     @return map.get(map.get($colors, $color-map), $color-name);
+//     @return map.get(map.get($colors, $color-map-key), $color-name);
 // }
-@function get-pep-color($color-map, $color-name) {
-    @return map.get($_pepperi-theme, colors, $color-map, $color-name);
+@function get-pep-color($color-map-key, $color-name) {
+    @return map.get($_pepperi-theme, colors, $color-map-key, $color-name);
 }
 
 /// Gets shadow from pep theme
 /// @param {Map} $pepperi-theme - the pep theme map 
-/// @param {String} $shadow-map - the shadow map 
+/// @param {String} $shadow-map-key - the shadow map key
 /// @param {String} $shadow-name - the shadow name
 /// @return {shadow} - wanted shadow
-// @function get-pep-shadow($pepperi-theme, $shadow-map, $shadow-name) {
+// @function get-pep-shadow($pepperi-theme, $shadow-map-key, $shadow-name) {
 //     $shadows: map.get($pepperi-theme, shadows);
-//     @return map.get(map.get($shadows, $shadow-map), $shadow-name);
+//     @return map.get(map.get($shadows, $shadow-map-key), $shadow-name);
 // }
 
-@function get-pep-shadow($shadow-map, $shadow-name) {
-    @return map.get($_pepperi-theme, shadows, $shadow-map, $shadow-name);
+@function get-pep-shadow($shadow-map-key, $shadow-name) {
+    @return map.get($_pepperi-theme, shadows, $shadow-map-key, $shadow-name);
 }
 
 /// Replace `$search` with `$replace` in `$string`

package/src/core/style/abstracts/mixins.scss

@@ -387,69 +387,69 @@
 // ******************************************************************************
 //                       State weak declerations
 // ******************************************************************************
-@mixin pep-state-default($style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-default($style: weak, $color-map-key: null, $regularBorder: false) {
     @if ($style == 'none') {
         @include state-none-default();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-default();
     } @else if ($style == 'weak') {
-        @include state-weak-default($color-name);
+        @include state-weak-default($color-map-key);
     } @else if ($style == 'strong') {
-        @include state-strong-default($color-name);
+        @include state-strong-default($color-map-key);
     } @else { // regular.
-        @include state-regular-default($regularBorder, $color-name);
+        @include state-regular-default($regularBorder, $color-map-key);
     }
 }
-@mixin pep-state-disable($style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-disable($style: weak, $color-map-key: null, $regularBorder: false) {
     @if ($style == 'none') {
         @include state-none-disable();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-disable();
     } @else if ($style == 'weak') {
-        @include state-weak-disable($color-name);
+        @include state-weak-disable($color-map-key);
     } @else if ($style == 'strong') {
-        @include state-strong-disable($color-name);
+        @include state-strong-disable($color-map-key);
     } @else { // regular.
-        @include state-regular-disable($regularBorder, $color-name);
+        @include state-regular-disable($regularBorder, $color-map-key);
     }
 }
-@mixin pep-state-hover($style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-hover($style: weak, $color-map-key: null, $regularBorder: false) {
     @if ($style == 'none') {
         @include state-none-hover();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-hover();
     } @else if ($style == 'weak') {
-        @include state-weak-hover($color-name);
+        @include state-weak-hover($color-map-key);
     } @else if ($style == 'strong') {
-        @include state-strong-hover($color-name);
+        @include state-strong-hover($color-map-key);
     } @else { // regular.
-        @include state-regular-hover($regularBorder, $color-name);
+        @include state-regular-hover($regularBorder, $color-map-key);
     }
 }
-@mixin pep-state-active($style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-active($style: weak, $color-map-key: null, $regularBorder: false) {
     @if ($style == 'none') {
         @include state-none-active();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-active();
     } @else if ($style == 'weak') {
-        @include state-weak-active($color-name);
+        @include state-weak-active($color-map-key);
     } @else if ($style == 'strong') {
-        @include state-strong-active($color-name);
+        @include state-strong-active($color-map-key);
     } @else { // regular.
-        @include state-regular-active($regularBorder, $color-name);
+        @include state-regular-active($regularBorder, $color-map-key);
     }
 }
-@mixin pep-state-focus($style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-focus($style: weak, $color-map-key: null, $regularBorder: false) {
     @if ($style == 'none') {
         @include state-none-focus();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-focus();
     } @else if ($style == 'weak') {
-        @include state-weak-focus($color-name);
+        @include state-weak-focus($color-map-key);
     } @else if ($style == 'strong') {
-        @include state-strong-focus($color-name);
+        @include state-strong-focus($color-map-key);
     } @else { // regular.
-        @include state-regular-focus($regularBorder, $color-name);
+        @include state-regular-focus($regularBorder, $color-map-key);
     }
 }
 
@@ -458,46 +458,46 @@
 // ******************************************************************************
 //  Weak - default
 // -----------------------------------------------------------------------------
-@mixin state-weak-default($color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-weak;
+@mixin state-weak-default($color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-weak;
     }
-    background: functions.get-pep-color($color-map-name, color-tran-30);
+    background: functions.get-pep-color($color-map-key, color-tran-30);
 }
-@mixin state-weak-disable($color-map-name: null) {
+@mixin state-weak-disable($color-map-key: null) {
     @include state-disabled();
 
-    @if ($color-map-name == null) {
-        $color-map-name: color-weak;
+    @if ($color-map-key == null) {
+        $color-map-key: color-weak;
     }
     color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color($color-map-name, color-tran-10) !important;
+    background: functions.get-pep-color($color-map-key, color-tran-10) !important;
 }
-@mixin state-weak-hover($color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-weak;
+@mixin state-weak-hover($color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-weak;
     }
-    background: functions.get-pep-color($color-map-name, color-tran-40);
+    background: functions.get-pep-color($color-map-key, color-tran-40);
 }
-@mixin state-weak-active($color-map-name: null, $add-inline: true, $regularBorder: false) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-weak;
+@mixin state-weak-active($color-map-key: null, $add-inline: true, $regularBorder: false) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-weak;
     }
 
     &:not(.keep-background-on-focus) {
-        // background: functions.get-pep-color($color-map-name, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
+        // background: functions.get-pep-color($color-map-key, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
         background: functions.get-pep-color(color-system-primary-invert, color-base);
     }
 
     box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     
     @if ($add-inline) {
-        @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
+        @include inline(functions.get-pep-color($color-map-key, color-base), 1px, solid, $regularBorder);
     }
 }
-@mixin state-weak-focus($color-map-name: null, $add-inline: true, $regularBorder: false) {
+@mixin state-weak-focus($color-map-key: null, $add-inline: true, $regularBorder: false) {
     // box-shadow: functions.get-pep-shadow(shadow-xs, soft);
-    @include state-weak-active($color-map-name, $add-inline, $regularBorder);
+    @include state-weak-active($color-map-key, $add-inline, $regularBorder);
     @include focus();
 }
 
@@ -538,54 +538,54 @@
 // ******************************************************************************
 //  Regular - default
 // -----------------------------------------------------------------------------
-@mixin state-regular-default($regularBorder: false, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
+@mixin state-regular-default($regularBorder: false, $color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-regular;
     }
-    background: functions.get-pep-color($color-map-name, color-flat-r-40);
+    background: functions.get-pep-color($color-map-key, color-flat-r-40);
     box-shadow: functions.get-pep-shadow(shadow-xs, soft);
-    @include inline(functions.get-pep-color($color-map-name, color-flat-r-20), 1px, solid, $regularBorder);
+    @include inline(functions.get-pep-color($color-map-key, color-flat-r-20), 1px, solid, $regularBorder);
 }
-@mixin state-regular-hover($regularBorder: false, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
+@mixin state-regular-hover($regularBorder: false, $color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-regular;
     }
-    background: functions.get-pep-color($color-map-name, color-flat-r-40);
+    background: functions.get-pep-color($color-map-key, color-flat-r-40);
     box-shadow: functions.get-pep-shadow(shadow-xs, regular);
-    @include inline(functions.get-pep-color($color-map-name, color-flat-r-10), 1px, solid, $regularBorder);
+    @include inline(functions.get-pep-color($color-map-key, color-flat-r-10), 1px, solid, $regularBorder);
 }
-@mixin state-regular-active($regularBorder: false, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
+@mixin state-regular-active($regularBorder: false, $color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-regular;
     }
-    background: functions.get-pep-color($color-map-name, color-flat-r-30);
+    background: functions.get-pep-color($color-map-key, color-flat-r-30);
     box-shadow: functions.get-pep-shadow(shadow-xs, hard);
-    @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
+    @include inline(functions.get-pep-color($color-map-key, color-base), 1px, solid, $regularBorder);
 
     // @if $regularBorder {
     // } @else {
     //     @include focus();
     // }
 }
-@mixin state-regular-focus($regularBorder: false, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
+@mixin state-regular-focus($regularBorder: false, $color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-regular;
     }
-    background: functions.get-pep-color($color-map-name, color-flat-r-30);
+    background: functions.get-pep-color($color-map-key, color-flat-r-30);
     box-shadow: functions.get-pep-shadow(shadow-xs, regular);
-    @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
+    @include inline(functions.get-pep-color($color-map-key, color-base), 1px, solid, $regularBorder);
     @include focus();
 }
-@mixin state-regular-disable($regularBorder: false, $color-map-name: null) {
+@mixin state-regular-disable($regularBorder: false, $color-map-key: null) {
     @include state-disabled();
     
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
+    @if ($color-map-key == null) {
+        $color-map-key: color-regular;
     }
     color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color($color-map-name, color-flat-r-30) !important;
+    background: functions.get-pep-color($color-map-key, color-flat-r-30) !important;
     box-shadow: functions.get-pep-shadow(shadow-xs, xsoft) !important;
-    @include inline(functions.get-pep-color($color-map-name, color-tran-20), 1px, solid, $regularBorder);
+    @include inline(functions.get-pep-color($color-map-key, color-tran-20), 1px, solid, $regularBorder);
 }
 
 // ******************************************************************************
@@ -593,13 +593,13 @@
 // ******************************************************************************
 //  Strong - default
 // -----------------------------------------------------------------------------
-@mixin state-strong-default($color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
+@mixin state-strong-default($color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-strong;
     }
 
     font-weight: variables.$font-weight-bold;
-    background: functions.get-pep-color($color-map-name, color-base);
+    background: functions.get-pep-color($color-map-key, color-base);
     box-shadow: functions.get-pep-shadow(shadow-sm, soft);
 
     $color: functions.get-pep-color(color-text, color-invert);
@@ -609,13 +609,13 @@
         @include svg-icon-color($color);
     }
 }
-@mixin state-strong-disable($color-map-name: null) {
+@mixin state-strong-disable($color-map-key: null) {
     @include state-disabled();
     
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
+    @if ($color-map-key == null) {
+        $color-map-key: color-strong;
     }
-    background: functions.get-pep-color($color-map-name, color-base) !important;
+    background: functions.get-pep-color($color-map-key, color-base) !important;
     opacity: 0.5 !important;
     
     $color: functions.get-pep-color(color-text, color-invert);
@@ -625,25 +625,25 @@
         @include svg-icon-color($color);
     }
 }
-@mixin state-strong-hover($color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
+@mixin state-strong-hover($color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-strong;
     }
-    background: functions.get-pep-color($color-map-name, color-flat-l-10);
+    background: functions.get-pep-color($color-map-key, color-flat-l-10);
     box-shadow: functions.get-pep-shadow(shadow-sm, regular);
 }
-@mixin state-strong-active($color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
+@mixin state-strong-active($color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-strong;
     }
-    background: functions.get-pep-color($color-map-name, color-flat-l-20);
+    background: functions.get-pep-color($color-map-key, color-flat-l-20);
     box-shadow: functions.get-pep-shadow(shadow-sm, hard);
 }
-@mixin state-strong-focus($color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
+@mixin state-strong-focus($color-map-key: null) {
+    @if ($color-map-key == null) {
+        $color-map-key: color-strong;
     }
-    background: functions.get-pep-color($color-map-name, color-flat-l-20);
+    background: functions.get-pep-color($color-map-key, color-flat-l-20);
     box-shadow: functions.get-pep-shadow(shadow-sm, soft);
     @include focus();
 }
@@ -673,20 +673,20 @@
 // ******************************************************************************
 //                       Buttons states declerations
 // ******************************************************************************
-@mixin pep-button-states($style: weak, $color-name: null) {
-    @include pep-state-default($style, $color-name, true);
+@mixin pep-button-states($style: weak, $color-map-key: null) {
+    @include pep-state-default($style, $color-map-key, true);
     &:hover {
-        @include pep-state-hover($style, $color-name, true);
+        @include pep-state-hover($style, $color-map-key, true);
     }
     &:focus {
-        @include pep-state-focus($style, $color-name, true);
+        @include pep-state-focus($style, $color-map-key, true);
     }
     &:active {
-        @include pep-state-active($style, $color-name, true);
+        @include pep-state-active($style, $color-map-key, true);
     }
     &:disabled {
         &:not(.ignore-disabled) {
-            @include pep-state-disable($style, $color-name, true);
+            @include pep-state-disable($style, $color-map-key, true);
         }
     }
 }
@@ -694,10 +694,10 @@
 // ******************************************************************************
 //                       Form field states declerations
 // ******************************************************************************
-@mixin pep-form-field-states($style: weak, $color-name: null) {
+@mixin pep-form-field-states($style: weak, $color-map-key: null) {
     // Default
     .mat-form-field-flex {
-        @include pep-state-default($style, $color-name);
+        @include pep-state-default($style, $color-map-key);
     }
 
     // Hover
@@ -705,7 +705,7 @@
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
-                @include pep-state-hover($style, $color-name);
+                @include pep-state-hover($style, $color-map-key);
             }
         }
     }
@@ -715,7 +715,7 @@
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
-                @include pep-state-focus($style, $color-name);
+                @include pep-state-focus($style, $color-map-key);
             }
         }
     }
@@ -726,7 +726,7 @@
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
-                @include pep-state-active($style, $color-name);
+                @include pep-state-active($style, $color-map-key);
             }
         }
     }
@@ -735,7 +735,7 @@
     &.mat-form-field-disabled {
         &:not(.ignore-disabled) {
             .mat-form-field-flex {
-                @include pep-state-disable($style, $color-name);
+                @include pep-state-disable($style, $color-map-key);
             }
         }
     }

package/src/core/style/base/base.scss

@@ -2,8 +2,43 @@
 @use '../abstracts/mixins';
 @use '../abstracts/functions';
 
+//  Roundness 
+// ---------------------------
+.border-radius-sm { border-radius: variables.$border-radius-sm; }
+.border-radius-md { border-radius: variables.$border-radius-md; }
+.border-radius-lg { border-radius: variables.$border-radius-lg; }
+
+//  Shadows 
+// ---------------------------
+.shadow-none { box-shadow: none; }
+
+.shadow-xs-xsoft { box-shadow: functions.get-pep-shadow(shadow-xs, xsoft); }
+.shadow-xs-soft { box-shadow: functions.get-pep-shadow(shadow-xs, soft); }
+.shadow-xs-regular { box-shadow: functions.get-pep-shadow(shadow-xs, regular); }
+.shadow-xs-hard { box-shadow: functions.get-pep-shadow(shadow-xs, hard); }
+
+.shadow-sm-xsoft { box-shadow: functions.get-pep-shadow(shadow-sm, xsoft); }
+.shadow-sm-soft { box-shadow: functions.get-pep-shadow(shadow-sm, soft); }
+.shadow-sm-regular { box-shadow: functions.get-pep-shadow(shadow-sm, regular); }
+.shadow-sm-hard { box-shadow: functions.get-pep-shadow(shadow-sm, hard); }
+
+.shadow-md-xsoft { box-shadow: functions.get-pep-shadow(shadow-md, xsoft); }
+.shadow-md-soft { box-shadow: functions.get-pep-shadow(shadow-md, soft); }
+.shadow-md-regular { box-shadow: functions.get-pep-shadow(shadow-md, regular); }
+.shadow-md-hard { box-shadow: functions.get-pep-shadow(shadow-md, hard); }
+
+.shadow-lg-xsoft { box-shadow: functions.get-pep-shadow(shadow-lg, xsoft); }
+.shadow-lg-soft { box-shadow: functions.get-pep-shadow(shadow-lg, soft); }
+.shadow-lg-regular { box-shadow: functions.get-pep-shadow(shadow-lg, regular); }
+.shadow-lg-hard { box-shadow: functions.get-pep-shadow(shadow-lg, hard); }
+
+.shadow-xl-xsoft { box-shadow: functions.get-pep-shadow(shadow-xl, xsoft); }
+.shadow-xl-soft { box-shadow: functions.get-pep-shadow(shadow-xl, soft); }
+.shadow-xl-regular { box-shadow: functions.get-pep-shadow(shadow-xl, regular); }
+.shadow-xl-hard { box-shadow: functions.get-pep-shadow(shadow-xl, hard); }
+
 //  Spacing
-// ------------------------
+// ---------------------------
 .pep-spacing-element-negative {
     @include mixins.pep-spacing-element-negative();
 }
@@ -11,6 +46,7 @@
 .pep-spacing-element {
     @include mixins.pep-spacing-element();
 }
+
 //  Floating alignment
 // ------------------------
 .pull-right {
@@ -54,20 +90,6 @@
     justify-content: left !important;
 }
 
-//  Roundness
-// ------------------------
-.roundness-sm {
-    border-radius: variables.$border-radius-sm;
-}
-
-.roundness-md {
-    border-radius: variables.$border-radius-md;
-}
-
-.roundness-lg {
-    border-radius: variables.$border-radius-lg;
-}
-
 //  Modal - General
 // -----------------------------------------------------
 .modal-footer {