1 | import {Optional} from 'aurelia-dependency-injection';
|
2 | import {customAttribute, Animator} from 'aurelia-templating';
|
3 | import {DOM} from 'aurelia-pal';
|
4 | import {injectAureliaHideStyleAtBoundary, aureliaHideClassName} from './aurelia-hide-style';
|
5 |
|
6 | /**
|
7 | * Binding to conditionally show markup in the DOM based on the value.
|
8 | * - different from "if" in that the markup is still added to the DOM, simply not shown.
|
9 | */
|
10 | 'hide')
( |
11 | export class Hide {
|
12 | /**
|
13 | * @internal
|
14 | */
|
15 | element: any;
|
16 | /**
|
17 | * @internal
|
18 | */
|
19 | animator: any;
|
20 | /**
|
21 | * @internal
|
22 | */
|
23 | domBoundary: any;
|
24 |
|
25 | /**@internal */
|
26 | static inject() {
|
27 | return [DOM.Element, Animator, Optional.of(DOM.boundary, true)];
|
28 | }
|
29 |
|
30 | /**
|
31 | * Creates a new instance of Hide.
|
32 | * @param element Target element to conditionally hide.
|
33 | * @param animator The animator that conditionally adds or removes the aurelia-hide css class.
|
34 | * @param domBoundary The DOM boundary. Used when the behavior appears within a component that utilizes the shadow DOM.
|
35 | */
|
36 | constructor(element, animator, domBoundary) {
|
37 | this.element = element;
|
38 | this.animator = animator;
|
39 | this.domBoundary = domBoundary;
|
40 | }
|
41 |
|
42 | /**
|
43 | * Invoked when the behavior is created.
|
44 | */
|
45 | created() {
|
46 | injectAureliaHideStyleAtBoundary(this.domBoundary);
|
47 | }
|
48 |
|
49 | /**
|
50 | * Invoked everytime the bound value changes.
|
51 | * @param newValue The new value.
|
52 | */
|
53 | valueChanged(newValue) {
|
54 | if (newValue) {
|
55 | this.animator.addClass(this.element, aureliaHideClassName);
|
56 | } else {
|
57 | this.animator.removeClass(this.element, aureliaHideClassName);
|
58 | }
|
59 | }
|
60 |
|
61 | /**
|
62 | * Binds the Hide attribute.
|
63 | */
|
64 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
65 | bind(bindingContext) {
|
66 | this.valueChanged(this.value);
|
67 | }
|
68 |
|
69 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
70 | value(value: any) {
|
71 | throw new Error('Method not implemented.');
|
72 | }
|
73 | }
|